2

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.

3
  • Have you tried using [disabled="disabled"]?
    – Bojangles
    Nov 29, 2011 at 15:59
  • Thanks. Unfortunately it doesn't work too.
    – apros
    Nov 29, 2011 at 16:04
  • 1
    Have you tried styling the disabled element with inline-styles or through a custom CSS class to make sure its even possible to style the disabled element?
    – Stefan
    Nov 29, 2011 at 16:06

2 Answers 2

6

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

3
  • Thanks, it works perfectly, but it depended on the server OS. On my local Windows 7 it works, but on the server Windows 2008 it doesn't work.
    – apros
    Nov 29, 2011 at 16:30
  • For me it works with Windows 7 but not with Windows XP. Did I answer your question? :)
    – Stefan
    Nov 29, 2011 at 16:38
  • Yes, I think your answer is the most close to the solution. Thank you very much.
    – apros
    Nov 29, 2011 at 16:44
1

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>
2
  • 1
    Thanks Orhun Alp Oral, but it seems not to be a problem for modern versions of Chrome at all.
    – apros
    Nov 5, 2012 at 13:26
  • 1
    This does not seem to work in IE, but I can set the background color in IE, which also solved my problem.
    – cdonner
    Aug 7, 2013 at 17:34

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.