Change IE background color on unopened, focused se

2019-01-27 13:15发布

站内问答 / HTML/CSS
1084 4 6

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.

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

JS:

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

CSS:

select:focus{
    background-color: red;
}

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

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.

enter image description here

Setting the option background color also does not clear the blue color.

option {
    background-color: green;
}

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

4条回答
冷血范
2楼-- · 2019-01-27 13:51

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:

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;
}
查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-01-27 13:53

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.

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

More info here

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
4楼-- · 2019-01-27 13:56

In Internet Explorer 11/Edge (not sure about previous versions) you can do this:

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.

Here's a dabblet demo

查看更多
0人赞 添加讨论(0) 举报
混吃等死
5楼-- · 2019-01-27 13:59

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.

An example is worth a thousand words: (tested in 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:

…and an overview of 40 Techniques:

These sites will give you information on how to further style the select with css and / or javascript.

Have fun reading and happy coding!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)