20

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/

6
  • IE6? 7? 8??? which ones matter? Commented Jul 9, 2013 at 17:06
  • I didn't specify, because it's blue in all of them.
    – ScottR
    Commented Jul 9, 2013 at 19:02
  • possible duplicate of HTML <select> selected option background-color CSS style
    – EricLaw
    Commented Jul 10, 2013 at 18:30
  • This is not a duplicate of the mentioned question because the solution does not remove the blue area on the drop down, which is the intent of this question. Also, that question is for the selected option - this is for whatever the blue area is defined as - they are distinct.
    – ScottR
    Commented Jul 10, 2013 at 21:09
  • @ScottR - did you manage to find a solution? I am having the same problem and so far the only relevant result in Google is this question :)
    – JSP64
    Commented Aug 15, 2013 at 22:51

4 Answers 4

57

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

2
  • 1
    I use the following CSS attributes to make focus indication in IE11 resemble Firefox's i.e. a dotted outline: background: transparent; color: inherit; outline-style: dotted; outline-width: thin; Commented Aug 15, 2016 at 11:33
  • 1
    Accepting this as this is the current way to do this. However the answer for IE < 10 is "It can't be done".
    – ScottR
    Commented Feb 19, 2018 at 18:28
6

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

1
  • +1 - The note about setting the foreground color has now been incorporated into the accepted answer but was not when this written. I also like not having :focus so that it might also cater for some other as yet unknown IE/Edge weirdness (and save a few bytes)...
    – Jake
    Commented May 10, 2018 at 1:46
2

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

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!

5
  • A list of resources is not an answer. Of course you can style it anyway you like if you don't use a <select> element, but that does not answer the question.
    – ScottR
    Commented Jul 11, 2013 at 2:16
  • @ScottR I've updated my answer with an example to my suggested solution. Commented Jul 11, 2013 at 12:04
  • Thanks, but I want to change the color of a focused select, not make the select unfocused. Still doesn't answer the question.
    – ScottR
    Commented Jul 11, 2013 at 14:49
  • @ScottR Answer updated. Hopefully it's closer to your desired result now. Commented Jul 11, 2013 at 17:13
  • Nope, doesn't work. Made a fiddle with your code. jsfiddle.net/5HvuR. Rather not keep state on the select, but I can see how it might be necessary.
    – ScottR
    Commented Jul 11, 2013 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.