html - 如何从 Firefox 中的选择元素中删除箭头

Question

我正在尝试使用 CSS3 设置 select 元素的样式。我在 WebKit(Chrome/Safari)中得到了我想要的结果，但 Firefox 的播放效果并不好(我什至不关心 IE)。我正在使用 CSS3 appearance 属性，但由于某种原因，我无法将下拉图标从 Firefox 中移出。

这是我正在做的一个例子:http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

如您所见，我并没有尝试任何花哨的东西。我只想删除默认样式并添加我自己的下拉箭头。就像我说的，在 WebKit 中很棒，在 Firefox 中不是很好。显然， -moz-appearance: none 并没有摆脱下拉项。

有什么想法吗？不，JavaScript 不是一个选项

Answer 1

更新:这已在 Firefox v35 中得到修复。见 full gist了解详情。

---

刚刚弄清楚如何从 Firefox 中删除选择箭头。诀窍是混合使用 -prefix-appearance、text-indent 和 text-overflow。它是纯 CSS，不需要额外的标记。

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

在 Windows 8、Ubuntu 和 Mac、最新版本的 Firefox 上测试。

实时示例:http://jsfiddle.net/joaocunha/RUEbp/1/

有关该主题的更多信息:https://gist.github.com/joaocunha/6273016