Wednesday, February 24, 2010

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!

10 comments:

  1. jeff you are THE MAN

    ReplyDelete
  2. this does not work in ie7.

    ReplyDelete
  3. With jQuery:
    $('#mySelect option[selected]').css('background-color', '#5CACEE');

    ReplyDelete
  4. What about changing the font color to white? Is it posible???

    ReplyDelete
  5. Have you tried adding 'color: #FFFFFF'?

    ReplyDelete
  6. Perfect solution. Thanks!!

    ReplyDelete
  7. Thankyou, this has saved me a great deal of frustration!

    ReplyDelete