9

I would like to change the font color of an <option> with the attribute disabled.

I have tried this

option:disabled { color: red }

and this

option[disabled] { color: red }

Both work but the color only gets red when you CLICK on the select field. By default it is black. How can I change it?

Here is an example: http://jsfiddle.net/y0g0stbb/

5 Answers 5

9

It can't be both selected and disabled.

option:disabled {
  color: red;
}
<select>
  <option selected>Choose something</option>
  <option disabled>1</option>
  <option>2</option>
  <option>3</option>
</select>

If you want to disable the select, instead of the option you need to moved disabled to the select tag

select:disabled {
  color: red;
}
<select disabled>
  <option selected>Choose something</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

1
  • Just test. Working well
    – Bang Andre
    Commented Jul 24 at 3:47
5

The color has to be applied to the select element, not the option. So, you can do this:

You can use required and assign empty value to the first option:

<select required>
    <option value="" disabled>0</option>
    <option value="1">1</option>
</select>

css:

select:invalid { color: red; }

If you do this, when the option with empty value is selected, the select element will be invalid, and so the above css class will trigger.

Solved this thanks to the answer to this post: Changing the color of a <select> depending on its value - CSS only(?)

3

Try this:

CSS:

    select{
    color:red;
    }
    option{
    color:black;
    }
1
  • It's possible to select the disabled.
    – Vijay
    Commented May 6, 2015 at 1:45
2

try this, hope it will work: in html:

    <select>
      <option value="">Choose something</option>
       <option disabled="disabled" value="" class="red">1</option>
       <option disabled="disabled" value="" class="red">2</option>
       <option disabled="disabled" value="" class="red">3</option>
    </select>

in CSS:

   select :disabled.red{
   color: red;
   }
0

With a little bit of Javascript you can do something like this if there are no selected valid option:

<select class="">[options]</select>

And if there a selected valid option you simple put some class through javascript in the select element:

<select class="selected">[options]</select>

And then in your CSS:

select{
 color: [not selected color];
}
select.selected{
 color: [selected color];
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.