隐藏<select>元素的下拉箭头的正确"-moz-appearance"值是什么

Question

我正在尝试<select>使用CSS 设置元素的下拉箭头,它在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;
}

这看起来很漂亮

根据这个逻辑,我必须做的唯一让它在Firefox中工作的是添加所有-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%,唯一的问题是默认下拉箭头不会消失,并保持在背景图像的顶部,如此处所示

看起来-moz-appearance: button;对<select>元素不起作用.也-moz-appearance: none;无效删除默认下拉箭头.

那么-moz-appearance删除默认下拉箭头的正确值是什么？

更新:

2014年12月11日:停止发明新的黑客攻击.在4年半之后,-moz-appearance:none自Firefox 35开始工作.虽然moz-appearance:button仍然存在,但无论如何都不需要使用它.这是一个非常基本的工作示例.

2014年4月28日:提到的css hack工作了几个月但是从2014年4月开始,这个错误在所有平台上都会逐渐回到Firefox 31.0.a1.

Answer 1

更新:这是在Firefox v35中修复的.有关详细信息,请参阅完整要点.

== 如何隐藏Firefox中的选择箭头 ==

刚想出怎么做.诀窍是使用的混合-prefix-appearance,text-indent和text-overflow.它是纯CSS,不需要额外的标记.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

长话短说,通过向右推一点点,溢出就摆脱了箭头.挺整洁的,对吧？

我刚写的关于这个要点的更多细节.所有最新的Firefox版本均在Ubuntu,Mac和Windows上进行了测试.

Answer 2

这是伙计们!固定!

等等看:https://bugzilla.mozilla.org/show_bug.cgi？id = 649849

或解决方法

对于那些想知道:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

首先,因为臭虫中有很多恶意垃圾邮件,它会为任何被分配到此的人创建一个敌对的工作场所.

其次,有能力做到这一点(包括重写)的人暂时被分配到另一个项目(b2g),并且在该项目接近完成之前没有时间.

第三,即使那个人有时间,也不能保证这将是一个优先事项,因为尽管webkit有这个,它打破了应该如何工作的规范(这是我被告知,我不是个人知道规格)

现在看https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

页面不再存在且错误尚未修复,但JoãoCunha提供了可接受的解决方法,你们现在可以感谢他了!