相关疑难解决方法(0)

我正在尝试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不是一个选项

请看这个例子:

select {
  width: 172px;
  height: 22px;
  padding: 2px 7px;
  border: none;
  background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
}

<select>
  <option value="abcdefg">abcdefg</option>
  <option value="1234567">1234567</option>
  <option value="abcdefg">abcdefg</option>
</select>

https://jsfiddle.net/jeafgilbert/wz0zaev0/

有人可以将其更新为在Chrome中透明吗？目前FF中的结果是正确的.谢谢.

更新:

现在-webkit-appearance: none;Chrome 无法正常使用.

我已经制作了一个自定义选择框,带有自定义下拉箭头,它在Google Chrome和Safari中看起来不错,但在Mozilla(奇怪地)和Internet Explorer(不是那么奇怪)中,原始箭头仍然存在以及新的箭头.

这是CSS样式:

    .sb2_panes select {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 20px;
        margin: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background: url(img/search_arrow.png) no-repeat right #f8f8f8;
        color: #888;
        border: none;
        outline: none;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: normal;
        appearance: normal;
        cursor: pointer;
    }

以下是Google Chrome中的内容:

这是Mozilla的样子:

谢谢.