我正在尝试仅使用CSS设置<select>
元素的下拉箭头样式,它在Chrome/Safari中工作得很好:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
它很好地呈现了as seen here
按照这种逻辑,我唯一需要做的就是将所有-webkit-*
内容添加为-moz-*
:
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
它适用于99%,唯一的问题是默认的下拉箭头不会消失,并停留在背景图像as seen here的顶部
对于<select>
元素,-moz-appearance: button;
似乎不起作用。此外,-moz-appearance: none;
不会删除默认的下拉箭头。
那么,删除默认下拉箭头的-moz-appearance
的正确值是什么?
更新:
2014年12月11日:停止发明新的黑客。4年半后,-moz-appearance:none
从Firefox35开始工作。虽然moz-appearance:button
仍然是坏的,但无论如何你都不需要使用它。Here is a very basic working example.
Firefox2014年4月28日:提到的css hack工作了几个月,但自2014年4月初以来,这个错误在所有平台上每晚都会重新出现在 31.0.a1中。
发布于 2011-07-22 17:17:20
就是这样,伙计们!修复了!
拭目以待:https://bugzilla.mozilla.org/show_bug.cgi?id=649849
对于那些想知道的人:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
首先是
,因为bug中有许多恶意垃圾邮件,所以它为任何被分配到这一任务的人创建了一个充满敌意的工作场所。
其次,有能力做到这一点(包括重写)的人暂时被分配到另一个项目(b2g),在该项目接近完成之前没有时间。
第三,即使那个人再次有时间,也不能保证这将是优先的,因为尽管webkit有这一点,但它违反了应该如何工作的规范(这是我被告知的,我个人并不知道规范)。
现在请参阅https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)
这个页面已经不存在了,错误也没有修复,但是an acceptable workaround来自João Cunha,你们现在可以感谢他了!
发布于 2013-08-20 13:37:32
火狐更新:此问题已在 v35中修复。有关详细信息,请参阅。
== 如何在Firefox ==中隐藏选择箭头
只是想出了怎么做。诀窍是混合使用-prefix-appearance
、text-indent
和text-overflow
。它是纯CSS,不需要额外的标记。
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
长话短说,通过将它向右推一点,溢出就摆脱了箭头。很整洁,是吧?
关于我刚写的this gist的更多细节。在Ubuntu,Mac和Windows上进行了测试,都使用了最新的Firefox版本。
发布于 2012-09-26 12:43:21
要取消默认的下拉箭头,请使用:
-moz-appearance: window;
https://stackoverflow.com/questions/6787667
复制相似问题