IE8-Fix: Disabled select not showing selected options

In this post a small workaround for disabled select not showing selected options in IE8. It's probably not the cleanest fix, but it get's the job done.

Problem

A disabled select does not highlight the selected options.

   1:  <select size="3" multiple="multiple" id="mySelect" disabled="disabled">

   2:      <option selected="selected" value="Option1">Option 1</option>

   3:      <option selected="selected" value="Option2">Option 2</option>

   4:      <option value="Option3">Option 3</option>        

   5:  </select>  

Solution

The following CSS provides a workaround. It looks pretty similar to the appearance we are used to.

   1:  select[disabled="disabled"][multiple="multiple"]{

   2:      background-color:#D4D0C8;

   3:  } 

   4:   

   5:  select[disabled="disabled"][multiple="multiple"] option[selected="selected"]{

   6:      background-color:navy;

   7:  }  

Still not working?

Make sure you are using a transitional doctype.

   1:  <!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->

You can also try to force the compatibility mode.

   1:  <meta http-equiv="X-UA-Compatible" content="IE=8"> 

Disclaimer

I tested this on IE8, FireFox and Opera.

Better fix?

Please let me know!