Question

当我关注下拉菜单时，我想从IE更改蓝色背景颜色，但我似乎无法找到任何CSS来执行此操作。

<select id=focusSelect><option>Option</option></select>

JS：

document.getElementById("focusSelect").focus();

CSS：

select:focus{
    background-color: red;
}

http://jsfiddle.net/TafDD/3/

具体来说，这适用于下拉菜单未打开的情况。样式化选项不是问题。

我也无法找到关于这是否可行的明确答案。

enter image description here

设置option背景色也不会清除蓝色。

option {
    background-color: green;
}

http://jsfiddle.net/srycroft/yE2Zg/

Answer 1

在Internet Explorer 11 / Edge中（不确定以前的版本），您可以这样做：

select:focus::-ms-value {
    color: black; 
    background: red;
}

您还应该指定字体颜色，因为它默认为白色（最初与蓝色对比），因此您也想要覆盖它。

Here's a dabblet demo

Answer 2

感谢这是一个古老的问题，但为了防止IE中选择下拉列表中所选选项的蓝色背景，请使用上面WillRice提到的MS伪元素-ms值。重要的是，您需要为文本设置颜色css属性，因为这将默认为白色。

select::-ms-value {
    background: none; /* remove blue background on ie10/ie11 when selected*/
    color:#000;
}

更多信息here

Answer 3

我正在使用下面的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;
}

Answer 4

我一直在摆弄css和javascript，并在互联网上寻找解决方案。不幸的是，它似乎无法改变IE的蓝色突出显示本身。在下面的例子中，我使用了CSS和JS的组合来实现与http://jsfiddle.net/TafDD/3/上的结果几乎相同的结果。看看吧。

一个例子胜过千言万语： （在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>

我希望这会对你有所帮助。

我还建议您查看：

......以及40项技术概述：

Form Elements: 40+ CSS/JS Styling and Functionality Techniques

这些网站将为您提供有关如何使用css和/或javascript进一步设置样式的信息。

阅读愉快，编码愉快！

在未打开的聚焦选择框上更改IE背景颜色

4 个答案: