如何使用 -moz-appearance 显示菜单列表按钮？答案

【问题标题】：how to use -moz-appearance to display a menulist-button?如何使用 -moz-appearance 显示菜单列表按钮？
【发布时间】：2010-12-16 05:51:59
【问题描述】：

我正在寻找有关使用 -moz-appearance 和 -webkit-appearance 属性来模拟菜单列表按钮（又名拆分按钮）外观的任何参考/教程等。

我想要实现的是 [link text][YUI's split button example] 之类的东西（但遗憾的是不能使用 YUI）。 -webkit-appearance 工作正常，但我似乎无法让 -moz-appearance 工作。具体来说，我将它应用于哪种类型的元素似乎并不重要，我得到向下的三角形，表示有一个下拉菜单，但没有按钮文本。例如，这些都在 Safari 中按我的预期显示，但在 Firefox 中没有显示文本（仅出于本示例的目的使用内联样式）：

  <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"/>

我想我想了解是否还有其他需要做的事情，就设置其他样式而言，或者该属性是否仅适用于某些元素等。我空手而归，寻找示例外观属性实际上被设置为菜单列表按钮，所以如果有人有，我很乐意看到它。

【问题讨论】：

您的示例似乎没有链接。

标签： firefox css mozilla appearance

【解决方案1】：

在 Gecko 中，-moz-appearance: menulist-button; 样式仅适用于菜单列表箭头，不适用于菜单按钮箭头，它们只是小图像。

【讨论】：