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

Question

我正在尝试select使用CSS3 设置元素的样式。我在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

好的，我知道这个问题很旧，但是两年之后，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中进行此操作，请在类’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-appearance：window隐藏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/html" target="_blank">select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
}

挺酷的，因为仅在3小时前遇到了这个错误（我是网页设计的新手，完全是自学成才的）。但是，这个社区间接地为我提供了很多帮助，我认为现在该是我回馈社会的时候了。

我只在firefox（mac）版本18和22（更新后）中对其进行了测试。

欢迎所有反馈。