How to style a select tag's option element?

问题:

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 {     background-color: #cc0000;      font-weight: bold;      font-size: 12px;      color: white; }

RedWhiteBlueGreen

Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.

回答1:

Unfortunately, WebKit browsers do not support styling of tags yet, except for color and background-color.

The most widely used cross browser solution is to use

/

and style them using CSS. Frameworks like Bootstrap do this well.

回答2:

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:

• Use Select2 which actually converts your selects into uls (allowing many things)
• Split your selects into multiple in order to group values
• Split into optgroup

回答3:

I actually discovered something recently that seems to work for styling individual elements within Chrome, Firefox, and IE using pure CSS.

Maybe, try the following:

HTML:

BlankWhiteRedBlue

CSS:

select {     background-color:#000;     color: #FFF; }  select * {     background-color:#000;     color:#FFF; }  select *.red { /* This, miraculously, styles the '' 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/

回答4:

Future versions of Chrome (49+) will now support styling 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 apply font-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 should be in the stable Chrome channel by version 49.0.

回答5:

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() {  if ($(this).val()=='red') {   $(this).addClass('option_red');  } else {   $(this).removeClass('option_red');  } }); $('select.potentially_red').each( function() {  if ($(this).val()=='red') {   $(this).addClass('option_red');  } else {   $(this).removeClass('option_red');  } });

.option_red {     background-color: #cc0000;      font-weight: bold;      font-size: 12px;      color: white; }

     RedWhiteBlueGreen

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

文章来源: How to style a select tag's option element?