Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change IE background color on unopened, focused select box

Tags:

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/

like image 394
ScottR Avatar asked Jul 09 '13 16:07

ScottR


People also ask

How do you change the background color on a box?

Change the inside (fill) colorClick Shape Fill, and under Theme Colors, pick the color you want. Select the shape or text box. On the Drawing Tools Format tab, click Shape Fill > More Fill Colors. In the Colors box, either click the color you want on the Standard tab, or mix your own color on the Custom tab.

How do I change the color of an option in select?

To change the selected option color of the menu, the “:checked” selector of CSS is used. :checked is a pseudo-class element that can be only linked with input type elements, such as “option”, “checkbox”, and “radio buttons”. It is mainly used to change the behavior of the selected value of these elements.


1 Answers

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

like image 167
willrice Avatar answered Sep 17 '22 15:09

willrice