CODEWITHSUNDEEP
csscss-selectors
Reza Saadati
Reza Saadati

Reputation: 5439

Change the 'option' color with the attribute 'disabled'

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/

Upvotes: 9

Views: 31665

Answers (5)

Javi Marz&#225;n
Javi Marz&#225;n

Reputation: 1340

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(?)

Upvotes: 5

Camilo Espinoza
Camilo Espinoza

Reputation: 3

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];
}

Upvotes: 0

Vijay
Vijay

Reputation: 114

Try this:

CSS:

    select{
    color:red;
    }
    option{
    color:black;
    }

Upvotes: 3

Elle
Elle

Reputation: 63

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;
   }

Upvotes: 2

user4639281
user4639281

Reputation:

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>

Upvotes: 9

Related Questions