CODEWITHSUNDEEP
htmlcssgoogle-chrome
apros
apros

Reputation: 2878

Styling disabled <select> in Chrome

For styling disabled elements I used:

[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}

It's work perfectly in all browsers except Chrome. Is there exists a way to overcome this using css without classes, because I have a huge amount of elements on different pages and don't want to change it all.

Thanks in advance.

UPDATE

After some investigation I have realized that this can be reproduced only if client has a server OS like Windows 2008 and use only Chrome browser. But I hope its a rear condition in real life.

Upvotes: 2

Views: 14240

Answers (2)

Orhun Alp Oral
Orhun Alp Oral

Reputation: 754

The code below is works for me (style the option colors not select box itself):

<select multiple="multiple" disabled="disabled">
<option style="color:#CCCCCC;" value="1" selected>Monday</option>
<option style="color:#CCCCCC;" value="2" selected>Tuesday</option>
<option style="color:#CCCCCC;" value="3">Wednesday</option>
<option style="color:#CCCCCC;" value="4">Thursday</option>
<option style="color:#CCCCCC;" value="5">Friday</option>
<option style="color:#CCCCCC;" value="6">Saturday</option>
<option style="color:#CCCCCC;" value="7">Sunday</option>
</select>

Upvotes: 1

Stefan
Stefan

Reputation: 5672

It seems to be working just fine using Chrome 15.

input[disabled] {
  color: #933;
  background-color: #ffc;
}

Make sure you´ve cleared any cached style sheets.

Created a jsFiddle.

UPDATE

Noticed your question title and updated the example.

It´s seems to be a known issue for Chrome in Windows, see Style disabled multiple select – google chrome

Upvotes: 6

Related Questions