如何从Firefox中的select元素中删除箭头
我正在尝试使用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不是一种选择
好吧，我知道这个问题已经很老了，但是2年后，mozilla一事无成。
我想出了一个简单的解决方法。
这基本上剥离了Firefox中选择框的所有格式，并使用您的自定义样式在选择框周围封装了一个span元素，但只应用于firefox。
说这是你的选择菜单：
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
让我们假设css类'css-select'是：
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
在Firefox中，这将显示与选择菜单，其次是丑陋的Firefox选择箭头，其次是你看起来很好的自定义。 不理想。
现在为了在firefox中实现这个功能，在class'css-select-moz'周围添加一个span元素：
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
然后修复CSS以隐藏mozilla的脏箭头-moz-appearance：window并将自定义箭头放入span的类“css-select-moz”中，但只能将其显示在mozilla上，如下所示：
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
3个小时前，我只是在这个bug中蹒跚而行（我是网络设计的新手，完全是自学的）。 然而，这个社区间接地给了我很多帮助，我认为是时候回馈了。
我只测试它在firefox（mac）版本18，然后22（更新后）。
欢迎所有反馈。
更新：这已在Firefox v35中修复。 详情请参阅完整要点。
只是想出了如何从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
我使用的技巧是使选择宽度超过100％，并应用溢出：隐藏
select {
overflow:hidden;
width: 120%;
}
这是隐藏FF中下拉箭头的唯一方法。
BTW。 如果你想美丽的下拉菜单使用http://harvesthq.github.com/chosen/
链接地址: http://www.djcxy.com/p/41555.html上一篇: How to remove the arrow from a select element in Firefox