How to style the disabled and selected 'option' of a 'select' in HTML5

Question

I'm trying to use the first 'option' of a 'select' tag as a prompt to the user that input is required. So, I'd like the 'select' box to render the selection in a different color if the selected option is disabled.

So given the following code:

<select>
  <option selected="selected" disabled="disabled">Choose best player...</option>
  <option>Walter Payton</option>
  <option>Jim McMahon</option>
  <option>Mike Singletary</option>
  <option>Richard Dent</option>
  <option>Steve McMichael</option>
  <option>Wilber Marshall</option>
</select>

I'd like the page to show the dropdown with "Choose best player..." in the color gray and then change the color if a non-disabled option is chosen.

I'd prefer a css solution if it exists, but after googling for quite some time I'm beginning to be convinced that some JavaScript will be required. Any simple solutions out there?

Here's a codepen with this preloaded.

seems similar question. http://stackoverflow.com/questions/5805059/select-placeholder?rq=1 — Kheema Pandey, Aug 27 '14 at 04:29
Styling the `option` tag is not well supported. Please see: http://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css, makesure to read the questions linked there as well. — Jon P, Aug 27 '14 at 04:40

dashtinejad · Accepted Answer · 2014-08-27T04:36:31.733

1

I think you need a little javascript:

HTML

<select onchange="highlight(this)">
    <option class="invalid" selected="selected" disabled="disabled">Choose best player...</option>
    <option>Walter Payton</option>
    <option>Jim McMahon</option>
    <option>Mike Singletary</option>
    <option>Richard Dent</option>
    <option>Steve McMichael</option>
    <option>Wilber Marshall</option>
</select>

CSS

option.invalid {
    background: #eee;
}

option.valid {
    background: #ff8;
}

JavaScript

function highlight(field){
    field.options[0].className = 'valid';
}

jsFiddle Demo.

edited Aug 27 '14 at 04:36

answered Aug 27 '14 at 04:13

dashtinejad

6,193
4
28
44

This doesn't seem to work (at least on the Mac using Chrome or Safari). :( – bsegraves Aug 27 '14 at 04:20
Yep, looks like a little javascript is required. Your updated answer sent me in the right direction. Here's a [codepen](http://codepen.io/bsegraves/pen/vLsrC) that shows what I was looking for. Thanks for your help! – bsegraves Aug 27 '14 at 14:17

Jon P · Answer 2 · 2014-08-27T05:24:27.183

Pure css you want:

select option[disabled="disabled"][selected="selected"]
{text-decoration:underline;}

This will style an option with both disabled and selected set. However, beware of browser compatability issues.

Demo

It won't however remove the style when another option is selected. According to MDN option:checked should be able to be used, but I have not been able to get it to work reliably (http://jsfiddle.net/gb35e6yj/).

score 0 · Answer 3 · answered Aug 27 '14 at 05:07

0

I think your difficulty (with a pure css solution) will be targeting your select element based on the attributes of a child element.

I would use some javascript to check that selected item isn't disabled and then apply your css.

answered Aug 27 '14 at 05:07

Tim Jensen

3
2

How to style the disabled and selected 'option' of a 'select' in HTML5

3 Answers3