如何从firefox中的select元素中删除箭头

我正在尝试使用css3设置一个select元素的样式。我在webkit(chrome/safari)中得到了我想要的结果,但火狐的表现并不好(我甚至不喜欢IE)。我正在使用css3appearance属性,但出于某种原因,我无法将下拉图标从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什么也没做。
我想出了一个简单的解决办法。
这基本上是在火狐中删除所有选择框的格式,并用您的自定义样式在选择框周围包装一个SPAN元素,但只适用于火狐。
假设这是您的选择菜单:

<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以隐藏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(更新后)中测试过它。
欢迎所有反馈。

评论