如何使用 -moz-appearance 显示菜单列表按钮?
我正在寻找有关使用 -moz-appearance 和 -webkit-appearance 属性来模拟菜单列表按钮(又名拆分按钮)外观的任何参考/教程等。
我想要实现的目标类似于[链接文本][YUI 的分割按钮示例](但遗憾的是无法使用 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"/>
我想我正在尝试了解是否还有其他我需要做的事情,到目前为止如设置其他样式,或者该属性仅适用于某些元素等。我空手而归,找到了外观属性实际上被设置为菜单列表按钮的示例,所以如果有人有一个,我很乐意看到它。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在 Gecko 中,
-moz-appearance: menulist-button;
样式仅适用于菜单列表箭头,不适用于菜单按钮箭头,后者只是小图像。In Gecko the
-moz-appearance: menulist-button;
style only applies to menulist arrows, not to menubutton arrows, which are just small images.