如何从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 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中，这将与SELECT菜单一起显示，后面是丑陋的Firefox选择箭头，然后是您漂亮的自定义外观。不理想。

现在，为了在Firefox中实现这一点，在类‘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，用-moz-外观：窗口隐藏Mozilla的脏箭头，并将自定义箭头扔到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(在我更新后)测试过它。

欢迎所有反馈。