how to use -moz-appearance to display a menulist-button?

开发者_开发知识库

I'm looking for any references/tutorials etc. about using the -moz-appearance and -webkit-appearance properties to simulate the look of a menulist-button (aka a split button).

What I'm trying to achieve is something like [link text][YUI's split button example] (but sadly can't use YUI). -webkit-appearance works ok, but I can't seem to get -moz-appearance to work. Specifically, it doesn't seem to matter what type of element I apply it to, I get the downward facing triangle indicating there's a drop down menu, but no button text. For example these all display as I expected in Safari, but no text is shown in Firefox (using inline styles just for the sake of this example):

  <a href="#" style="-webkit-appearance:menulist-button;-moz-appearance:menulist-button;width:150px;">hello</a>

  <div style="-webkit-appearance:menulist-button;-moz-appearance:menulist-button;width:150px;">here is my button</div>

  <input style="-webkit-appearance:menulist-button;-moz-appearance:menulist-button;width:150px;" value="hello"/>

I guess I'm trying to understand if there's something else I need to do, as far as setting other styles, or if the property only applies to certain elements, etc. I'm coming up empty handed finding examples of the appearance property actually being set to menulist-button, so if anyone's got one, I'd love to see it.

---

In Gecko the -moz-appearance: menulist-button; style only applies to menulist arrows, not to menubutton arrows, which are just small images.