• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

Text color of option element works in Firefox, Chrome, Safari but not IE8

I wanted to change the font color of disabled drop down options for a calendar dated picker.  I used the following code:

daysOfMonth.options[28].style.color = "red";

which works fine everywhere but in IE8 (not sure about earlier versions of IE).

Any suggestions?
1 Solution
How about using css:
<STYLE type="text/css">
OPTION.mar{background-color:maroon; color:white}
OPTION.white{background-color:white; color:maroon}
<OPTION>What is your preferred browser?</OPTION>
<OPTION class="mar">Firefox</OPTION>
<OPTION class="white">Internet Explorer</OPTION>

where id = 0 to 28
                  $('DDiv_'+id).className = "translucent";

where DDiv is ur id of ur select option.
                  $('DDiv_'+id).style.color = "#EE8404";

RichardetalAuthor Commented:
These dates are being disabled dynamically so I can't use CSS as you suggest pvlier.  

insoftservice: your suggestion appears to be what I have done already.  It seems to me that IE doesn't know what to do with the .style.color.  I've tried "#FF0000" instead of "red" but that didn't work either.

RichardetalAuthor Commented:
Here is the weekend function which works in everything but IE.

function remove_weekends(month_id_name,year_id_name) {
    for (int_day=1; int_day<=31; int_day++){
    var day = document.getElementById(month_id_name).value + "/" + int_day  + "/" + document.getElementById(year_id_name).value ;
  var d=new Date(day);
    var dow=d.getDay(day);
    if (dow==0 || dow==6){
      daysOfMonth.options[int_day-1].disabled = true;
      daysOfMonth.options[int_day-1].style.color = "#ff0000";
There is no way to change disabled select element's color from gray to something else. This is IE's default and non w3c standard - behaviour. So, just have to accept that its not going to happen in IE.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now