Can I change the font of select options?


Besides styling the entire <select>, can I style individual <option> tags?
cgipisaniAsked:
Who is Participating?
 
DaydreamsConnect With a Mentor Commented:
The styling of the option tag seems to work with Firefox, but not IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
select.Menu{
  font-family: Verdana,sans serif;
  font-size:   14pt;
  font-weight: bold;
  font-style:  normal;    
}

option.MenuOne{
  color:#FFFFFF; font-family:"times new roman";
  background-color:#FF0000;
}
option.MenuTwo{font-family:arial;
  color:#FFFF00;
  background-color:#0000FF;
}
option.MenuThree{font-family:"lucida calligraphy";
  color:#123456;
  background-color:#FEDCBA;
}

</style>

</head>
<body>
<form>
<select class="Menu" size="1">
<option class="MenuOne">Item One</option>
<option class="MenuOne">Item Two</option>
<option class="MenuOne">Item Three</option>
<option class="MenuTwo">Item Four</option>
<option class="MenuTwo">Item Five</option>
<option class="MenuTwo">Item Six</option>
<option class="MenuThree">Item Seven</option>
<option class="MenuThree">Item Eight</option>
<option class="MenuThree">Item Nine</option>
</select>
</form>
</body>
</html>

Other experts may yet comment..
0
 
DaydreamsCommented:
Hi cgipisani,

You can style the individual option tags. Take a look here:

http://www.codefoot.com/javascript/script_dropdown_formatting.html
0
 
cgipisaniAuthor Commented:
I should have been more specific.  Can I style the font in the <option> tags?
0
 
rdivilbissConnect With a Mentor Commented:
Daydreams' example code styles the options in Firefox 1.5.0.4 and IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519.

It does not work in Opera 8.54 rev 7730.

The W3C recommendation for the <option> tag does include the STYLE attribute, implying you may style individual option elements, however you are up against the vagarities of the various browser implementations.  See:>http://www.w3.org/TR/REC-html40/interact/forms.html#edef-OPTION

If you choose to do this, you will need to accept the fact that many user agents will ignore the style for the option elements.

Regards,
Rod



0
All Courses

From novice to tech pro — start learning today.