Solved

Can I change the font of select options?

Posted on 2006-07-11
6
5,241 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
ID: 17088134
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
ID: 17089750
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
ID: 17092876
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
ID: 17099367
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Xsl Nested Loop 4 30
selectSingleNode in Access 2013 11 68
Build and evolve an interactive experience 1 96
Finding the platform that was used to build a website 4 57
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

829 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