浏览器(Webkit,IE,Firefox)更改选择的背景

Question

我一直试图摆脱网站中的默认渐变背景.我知道如果我设置-webkit-appereance:none这是可能的,但是我将丢失我想要的下拉列表中的箭头和其他行为.无论如何使用-webkit-appearance:menulist将背景设置为白色？

这就是我所拥有的,但背景并没有改变

.ius select{
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    height:32px;
    border:1px solid #c8c8c8;
    width:250px;
    background:rgba(255, 255, 255, 0);
    background: transparent;
}

Answer 1

外观属性通常用于两件事:

1. 模仿其他元素的原生风格
2. 或删除所有本机样式(将外观设置为无)

这是一个非常奇怪的财产.

由于要删除本机默认背景,因此需要将外观设置为none.这将删除所有样式(渐变和默认箭头图标).然而,这不是什么大问题,因为您可以使用css为其应用更多样式.

随着标记:

<select id="menulist">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

和CSS:

#menulist {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:20px;
    border:1px solid rgb(156,156,156);
    width:250px;
    text-indent: 8px;
    /**
    * replace this background url with a proper arrow asset
    **/
    background: url('http://placehold.it/5x10') no-repeat 95% 50%;
}

这里有完整的jsfiddle:http://jsfiddle.net/gwwar/vR53Q/2/

由于此属性仅在Chrome,Safari和Firefox上受支持,因此我可能会采用不同的路线,并使用本机选择样式或使用您完全控制的下拉组件.