如何从Firefox中的SELECT元素中删除箭头

Question

如何从Firefox中的SELECT元素中删除箭头

我在试着select元素使用CSS 3。我在WebKit(Chrome/Safari)上得到了我想要的结果，但是Firefox玩得不太好(我甚至不想使用IE)。我在用CSS 3appearance属性，但由于某些原因，我无法摆脱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

好吧，我知道这个问题很老，但是两年过去了，Mozilla什么也没做。我想出了一个简单的解决办法。这实际上是去掉Firefox中选择框的所有格式，并用您的自定义样式将SPAN元素封装在选择框周围，但应该只适用于Firefox。假设这是您选择的菜单：<select&nbsp;class='css-select'> &nbsp;&nbsp;<option&nbsp;value='1'>&nbsp;First&nbsp;option&nbsp;</option> &nbsp;&nbsp;<option&nbsp;value='2'>&nbsp;Second&nbsp;option&nbsp;</option></select>并假设CSS类“css-select”是：.css-select&nbsp;{ &nbsp;&nbsp;&nbsp;background-image:&nbsp;url('images/select_arrow.gif'); &nbsp;&nbsp;&nbsp;background-repeat:&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;background-position:&nbsp;right&nbsp;center; &nbsp;&nbsp;&nbsp;padding-right:&nbsp;20px;}在Firefox中，这将与SELECT菜单一起显示，后面是丑陋的Firefox选择箭头，然后是您漂亮的自定义外观。不理想。现在，为了在Firefox中实现这一点，在类‘css-select-moz’周围添加一个span元素：&nbsp;&nbsp;&nbsp;<span&nbsp;class='css-select-moz'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select&nbsp;class='css-select'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<option&nbsp;value='1'>&nbsp;First&nbsp;option&nbsp;</option> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<option&nbsp;value='2'>&nbsp;Second&nbsp;option&nbsp;</option> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</select> &nbsp;&nbsp;&nbsp;</span>然后修复CSS，用-moz-外观：窗口隐藏Mozilla的脏箭头，并将自定义箭头扔到span的类‘css-select-moz’中，但只让它显示在Mozilla上，如下所示：.css-select&nbsp;{ &nbsp;&nbsp;&nbsp;-moz-appearance:window; &nbsp;&nbsp;&nbsp;background-image:&nbsp;url('images/select_arrow.gif'); &nbsp;&nbsp;&nbsp;background-repeat:&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;background-position:&nbsp;right&nbsp;center; &nbsp;&nbsp;&nbsp;padding-right:&nbsp;20px;}@-moz-document&nbsp;url-prefix()&nbsp;{.css-select-moz{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url('images/select_arrow.gif'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-repeat:&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-position:&nbsp;right&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right:&nbsp;20px; &nbsp;&nbsp;}}非常酷，因为只在3个小时前偶然发现了这个bug(我刚开始网页设计，完全自学)。然而，这个社会间接地为我提供了如此多的帮助，我认为是时候给我一些回报了。我只在Firefox(Mac)版本18和22(在我更新后)测试过它。欢迎所有反馈。