Solved

Can I change the font of select options?

Posted on 2006-07-11
6
5,238 Views
Last Modified: 2013-12-03

Besides styling the entire <select>, can I style individual <option> tags?
0
Comment
Question by:cgipisani
  • 2
6 Comments
 
LVL 15

Expert Comment

by:Daydreams
Comment Utility
Hi cgipisani,

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

http://www.codefoot.com/javascript/script_dropdown_formatting.html
0
 

Author Comment

by:cgipisani
Comment Utility
I should have been more specific.  Can I style the font in the <option> tags?
0
 
LVL 15

Accepted Solution

by:
Daydreams earned 63 total points
Comment Utility
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
 
LVL 29

Assisted Solution

by:rdivilbiss
rdivilbiss earned 62 total points
Comment Utility
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now