CSS 在未打开的、聚焦的选择框上更改 IE 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17553300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change IE background color on unopened, focused select box
提问by ScottR
I'd like to change the blue background color from IE when a drop down is focused, but I can't seem to find any CSS to do this.
我想在下拉焦点时更改 IE 的蓝色背景颜色，但我似乎找不到任何 CSS 来执行此操作。
<select id=focusSelect><option>Option</option></select>
JS:
JS：
document.getElementById("focusSelect").focus();
CSS:
CSS：
select:focus{
background-color: red;
}
Specifically this is for when the drop down is not open. Styling the options is not a problem.
特别是当下拉菜单没有打开时。样式选项不是问题。
I also can't find any definitive answer on whether this is possible to do at all.
我也找不到任何关于这是否可以做到的明确答案。
Setting the optionbackground color also does not clear the blue color.
设置option背景颜色也不会清除蓝色。
option {
background-color: green;
}
回答by willrice
In Internet Explorer 11/Edge (not sure about previous versions) you can do this:
在 Internet Explorer 11/Edge（不确定以前的版本）中，您可以执行以下操作：
select:focus::-ms-value {
color: black;
background: red;
}
You should also specify the font color because it otherwise defaults to white (to originally contrast against the blue), so you'll want to override it too.
您还应该指定字体颜色，因为否则默认为白色（最初与蓝色形成对比），因此您也需要覆盖它。
回答by SkyBlues87
Appreciate this is an oldish question, but to prevent the blue background on a selected option in a select dropdown in IE, use the MS pseudo element -ms-value as mentioned by WillRice above. Importantly though you need to set a color css attribute as well for the text as this will get defaulted to white.
感谢这是一个古老的问题，但为了防止 IE 中选择下拉列表中所选选项的蓝色背景，请使用上面 WillRice 提到的 MS 伪元素 -ms-value。重要的是，您还需要为文本设置颜色 css 属性，因为这将默认为白色。
select::-ms-value {
background: none; /* remove blue background on ie10/ie11 when selected*/
color:#000;
}
More info here
更多信息在这里
回答by AH.
I'm using the CSS below and it is working in latest IE11, Edge, Firefox and Chrome (I have not tested it with earlier browsers). Just remove border-radius and padding if you don't need them. And thanks to willrice for his contribution:
我正在使用下面的 CSS，它可以在最新的 IE11、Edge、Firefox 和 Chrome 中运行（我没有在早期的浏览器上测试过）。如果不需要它们，只需删除 border-radius 和 padding 即可。并感谢 willrice 的贡献：
select {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
select:focus::-ms-value {
background: white;
color: black;
}
select::-ms-expand {
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
回答by Markus Hofmann
I've been fiddling around with css and javascript and have searched the internet to find a solution. Unfortunately it looks like it's not possible to change IE's blue highlight itself. In the following example I've used a combination of CSS an JS to achieve nearly the same result in ie as you have on http://jsfiddle.net/TafDD/3/. Have a look at it.
我一直在摆弄 css 和 javascript，并在互联网上搜索以找到解决方案。不幸的是，似乎无法更改 IE 的蓝色突出显示本身。在下面的示例中，我使用了 CSS 和 JS 的组合来实现与您在http://jsfiddle.net/TafDD/3/上的 ie 几乎相同的结果。看看它。
An example is worth a thousand words:(tested in IE7)
一个例子值一千字：（在 IE7 中测试）
<!DOCTYPE html>
<html>
<head>
<title>CSS Form Select Focus Color Change Test Page</title>
<style type="text/css">
/* Set the desired background color for the whole select element */
form select {
background-color: #fff;
}
form select option {
background: transparent;
}
/* Set the desired color for the focus state */
select:focus, select.focus {
background-color: #f00;
outline: none;
}
</style>
</head>
<body>
<form action="" method="POST">
<div id="selectWrap">
<select id="focusSelect" name="test_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</form>
<!--[if lt IE 9]><script>
// NOTE: This is a pure JavaScript variant.
// You could also use something like jQuery.
var selectBox = document.getElementById('focusSelect');
// This will add the .focus class to the select
// giving it the defined background color
selectBox.onfocusin = function() {
this.className = 'focus';
};
// and this will restore the original background
// color by removing the .focus class
selectBox.onfocusout = function() {
this.className = '';
};
// This removes the blue highlight after an option is selected
selectBox.onchange = function() {
this.blur();
};
</script><![endif]-->
</body>
</html>
I hope this helps you.
我希望这可以帮助你。
I also recommend you have a look at:
我还建议你看看：
- jQuery.customSelect()
- Style a Select Box Using Only CSS
- DropKick.js
- Custom Style All Your Form Elements with Pure CSS and No JavaScript
…and an overview of 40 Techniques:
...以及 40 种技术的概述：
These sites will give you information on how to further style the select with css and / or javascript.
这些站点将为您提供有关如何使用 css 和/或 javascript 进一步设置选择样式的信息。
Have fun reading and happy coding!
祝您阅读愉快，编码愉快！
