I'm trying to set the style of an option
in a select
dropdown menu in Google Chrome. It works in all browsers except IE9 and Chrome.
option.red {_x000D_
background-color: #cc0000; _x000D_
font-weight: bold; _x000D_
font-size: 12px; _x000D_
color: white;_x000D_
}
_x000D_
<select name="color">_x000D_
<option class="red" value="red">Red</option>_x000D_
<option value="white">White</option>_x000D_
<option value="blue">Blue</option>_x000D_
<option value="green">Green</option>_x000D_
</select>
_x000D_
Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.
This question is related to
css
google-chrome
html-select
Unfortunately, WebKit browsers do not support styling of <option>
tags yet, except for color
and background-color
.
The most widely used cross browser solution is to use <ul>
/ <li>
and style them using CSS. Frameworks like Bootstrap do this well.
I have a workaround using jquery... although we cannot style a particular option, we can style the select itself - and use javascript to change the class of the select based on what is selected. It works sufficiently for simple cases.
$('select.potentially_red').on('change', function() {_x000D_
if ($(this).val()=='red') {_x000D_
$(this).addClass('option_red');_x000D_
} else {_x000D_
$(this).removeClass('option_red');_x000D_
}_x000D_
});_x000D_
$('select.potentially_red').each( function() {_x000D_
if ($(this).val()=='red') {_x000D_
$(this).addClass('option_red');_x000D_
} else {_x000D_
$(this).removeClass('option_red');_x000D_
}_x000D_
});
_x000D_
.option_red {_x000D_
background-color: #cc0000; _x000D_
font-weight: bold; _x000D_
font-size: 12px; _x000D_
color: white;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
<!-- The js will affect all selects which have the class 'potentially_red' -->_x000D_
<select name="color" class="potentially_red">_x000D_
<option value="red">Red</option>_x000D_
<option value="white">White</option>_x000D_
<option value="blue">Blue</option>_x000D_
<option value="green">Green</option>_x000D_
</select>
_x000D_
Note that the js is in two parts, the each
part for initializing everything on the page correctly, the .on('change', ...
part for responding to change. I was unable to mangle the js into a function to DRY it up, it breaks it for some reason
It's a choice (from browser devs or W3C, I can't find any W3C specification about styling select options though) not allowing to style select options.
I suspect this would be to keep consistency with native choice lists.
(think about mobile devices for example).
3 solutions come to my mind:
ul
s (allowing many things)select
s into multiple in order to group valuesoptgroup
This question is really multiple questions in one. They are different ways of styling something. Here are links to the questions within this question:
font-family
of an <option>
element:
font-size
of an <option>
element:
background-color
of an <option>
element:
font-weight
of an <option>
element:
color
of an <option>
element:
I actually discovered something recently that seems to work for styling individual <option></option>
elements within Chrome, Firefox, and IE using pure CSS.
Maybe, try the following:
HTML:
<select>
<option value="blank">Blank</option>
<option class="white" value="white">White</option>
<option class="red" value="red">Red</option>
<option class="blue" value="blue">Blue</option>
</select>
CSS:
select {
background-color:#000;
color: #FFF;
}
select * {
background-color:#000;
color:#FFF;
}
select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */
background-color:#F00;
color:#FFF;
}
select *.white {
background-color:#FFF;
color:#000;
}
select *.blue {
background-color:#06F;
color:#FFF;
}
Strange what throwing caution to the wind does. It doesn't seem to support the :active :hover :focus :link :visited :after :before
, though.
Example on JSFiddle: http://jsfiddle.net/Xd7TJ/2/
Since version 49+, Chrome has supported styling <option>
elements with font-weight
. Source: https://code.google.com/p/chromium/issues/detail?id=44917#c22
New SELECT Popup: font-weight style should be applied.
This CL removes themeChromiumSkia.css.
|!important|
in it prevented to applyfont-weight
. Now html.css has|font-weight:normal|
, and|!important|
should be unnecessary.
There was a Chrome stylesheet, themeChromiumSkia.css, that used font-weight: normal !important;
in it all this time. It was introduced to the stable Chrome channel in version 49.0.
Source: Stackoverflow.com