浏览器（Webkit，IE，Firefox）更改选择的背景 [英] Browser (Webkit, IE, Firefox) Change background for select

问题描述

我一直在试图摆脱网站中的默认渐变背景。我知道如果我设置-webkit-appereance：none这将是可能的，但然后我会失去箭头和其他行为在下拉我想要的。有没有反正将背景设置为白色与-webkit外观：menulist？

I have been trying to get rid of the default gradient background in Website. I know if I set the -webkit-appereance:none this would be possible but then I will lose the arrows and other behaviors in the dropdown that I want. Is there anyway of setting the background to white with the -webkit-appearance: menulist ?

这是我有，但背景不更改

This is what I have but the background does not change

.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;
}

推荐答案

1. 模仿其他元素的原生样式


2. 或移除所有原生样式将外观设置为无）

这是一个很奇怪的属性。

It's a pretty weird property.

要删除本机默认背景，您需要将外观设置为none。这将删除所有样式（渐变和默认箭头图标）。这不是什么大不了的，因为你可以使用CSS来应用更多的样式。

Since you want to remove the native default background, you need to set appearance to none. This will remove all styling (the gradients and the default arrow icons). This isn't a big deal however, since you can just use css to apply more styling to it.

使用标记：

<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/

The full jsfiddle is available here: http://jsfiddle.net/gwwar/vR53Q/2/

由于此属性仅支持Chrome，Safari和Firefox，我可能会采用不同的路由，并使用原生选择样式或使用您完全控制的下拉组件。

Since this property is only supported on Chrome, Safari and Firefox, I would probably go a different route and either use the native select styling or use a dropdown component that you have full control over.

这篇关于浏览器（Webkit，IE，Firefox）更改选择的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！