相关疑难解决方法(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不是一个选项

我正在使用以下代码来自定义我的选择下拉箭头:

HTML:

<span class="selectWrapper">
    <select id="rowselect" class="pageinfoselect input-mini">
        <option>...</option>
    </select>
</span>

CSS:

span.selectWrapper {
    position: relative;
    display: inline-block;
          width:65px;
}

span.selectWrapper select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f5f5f5;
    height:30px;
    color:#666666;
    border:1px solid #dddddd;
}




/* Select arrow styling */
span.selectWrapper:after {
    content: url("../images/arrow_down.png");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 30px;
    padding: 0 7px;
    background: #f5f5f5;
    color: white; …