Jump to content

Options in select different styles


bogdang
 Share

Recommended Posts

Hi. In a select I want to have some options with different font styles (for examples, some in bold, some in italic, ...). Is there a way to make this happen as I saw that options dont have the style property.I tried:<select name="selectName" multiple="true" size="6" style="width: 300px"> <option value="1"><div style='font-style: italic'>OPT1</div></option> <option value="2"><div style='font-style: italic'>OPT1</div></option></select><select name="selectName" multiple="true" size="6" style="width: 300px"> <option value="1"><span style='font-style: italic'>OPT1</span></option> <option value="2"><span style='font-style: italic'>OPT2</span></option></select><select name="selectName" multiple="true" size="6" style="width: 300px"> <option value="1"><i>OPT1</i></option> <option value="2"><i>OPT2</i></option></select>and didnt work. Any ideas on how to make this happen ?Thank you.B.

Link to comment
Share on other sites

In fact, even option elements can have style. Even with the attribute style. But you may consider using classes instead, different for various options in a selectbox. Each class has its very own style statements in your stylesheet, so if you gave several options different classes, they would have different styles too. :) Using other elements within the option element is not valid, option cannot have any elements in it.Example:

.myclass1 { font-style: italic; }.myclass2 { font-weight: bold; }
<select><option class="myclass1">something</option><option class="myclass1">something else</option><option class="myclass2">something else else</option><option class="myclass2">something else else else</option></select>

Link to comment
Share on other sites

In fact, even option elements can have style. Even with the attribute style. But you may consider using classes instead, different for various options in a selectbox. Each class has its very own style statements in your stylesheet, so if you gave several options different classes, they would have different styles too. :) Using other elements within the option element is not valid, option cannot have any elements in it.Example:
<select><option class="myclass1">something</option><option class="myclass1">something else</option><option class="myclass2">something else else</option><option class="myclass2">something else else else</option></select>

This works on FF but not on IE. In IE, the italic style isnt applied, but colors (probably other elements too) are applied.I need this to work on IE. Dont recommand me to use FF or other browsers please.Thank you.B
Link to comment
Share on other sites

<head><link type="text/css" rel="stylesheet" href="myCss.css"><head>...<select> <option class="myclass1">something</option> <option class="myclass1">something else</option> <option class="myclass2">something else else</option> <option class="myclass2">something else else else</option></select>...in myCss.css i have :.myclass1 { color: blue; font-style: italic;}.myclass2 { font-weight: bold; }I ran exactly your example and how I said, it works fine in FF but not in IE.PS: Test your example in IE and see what happens.

Link to comment
Share on other sites

So I see. I didn't know that. Options can't have font-weight nor font-style, but can have colour. Well, lets stick to that then :)Maybe it has something to do with the identification of optgroup element, that has both font-weight and font-style per default. But you can define color and backgroundcolor of the options.This must have got something to do with that IE handles <select> weirdly, I can't think of something else. Don't bother anyway, its just another IE thing.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...