在Firefox中选择元素的边框

Question

我想为选择元素添加边框。

问题出在firefox（版本29.0.1）中，为箭头添加背景，我不想要，我希望箭头背景保持白色。

您可以看到下面的代码（id选择2的选择是带边框的选项）：

#select2 {border:1px solid #999;}
<select id='select1'>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<br/><br/>
<select id='select2'>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

还有小提琴here

和图像：

我希望firefox select元素看起来像chrome（箭头上的select和白色背景上的灰色边框）。

谢谢！

Answer 1

您可以使用此css和自定义图片进行下拉菜单：

#select2 {
    border:1px solid #999;
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow :'';
    background : url("https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-16.png") no-repeat right 2px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    width:80px;//You can use custom dimension
}
select.#select2 :: -ms-expand {
    display: none;
}

演示：http://jsfiddle.net/lotusgodkk/RmfQ3/2/