Change IE background color on unopened, focused select box

Question

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/

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, Jul 10 '13 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, Aug 15 '13 at 22:51
Nope. Only way I could think of was to use a custom drop down (eg Chosen http://harvesthq.github.io/chosen/) — ScottR, Aug 15 '13 at 23:02

score 57 · Accepted Answer · edited Sep 06 '17 at 21:26

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

edited Sep 06 '17 at 21:26

AuRise

2,253
19
33

answered Apr 05 '14 at 02:25

willrice

806
9
5

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;` – Matthew Wise Aug 15 '16 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 Feb 19 '18 at 18:28

score 6 · Answer 2 · answered Jul 28 '15 at 09:08

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

answered Jul 28 '15 at 09:08

SkyBlues87

1,196
9
17

+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 May 10 '18 at 01:46

score 2 · Answer 3 · answered Feb 18 '16 at 12:32

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

Markus Hofmann · Answer 4 · 2013-07-11T17:12:37.187

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:

Form Elements: 40+ CSS/JS Styling and Functionality 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!

A list of resources is not an answer. Of course you can style it anyway you like if you don't use a — ScottR, Jul 11 '13 at 02:16
@ScottR I've updated my answer with an example to my suggested solution. — Markus Hofmann, Jul 11 '13 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, Jul 11 '13 at 14:49
@ScottR Answer updated. Hopefully it's closer to your desired result now. — Markus Hofmann, Jul 11 '13 at 17:13
Nope, doesn't work. Made a fiddle with your code. http://jsfiddle.net/5HvuR/. Rather not keep state on the select, but I can see how it might be necessary. — ScottR, Jul 11 '13 at 18:30

Change IE background color on unopened, focused select box

4 Answers4

Linked

Related