By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

Setting Style for Select > Option

P: n/a
Is there a way to change the font-family and font-size for each
individual option in a select menu? Something along the lines of:

<select size="1">
<option style="font-family: Arial; font-size: 8px">One</option>
<option style="font-family: Tahoma; font-size: 10px">Two</option>
<option style="font-family: Verdana; font-size: 12px">Three</option>
</select>

I see that I can change the color using style="color: whatever", but
none of the other attributes change this way.

TIA,

Jason
Feb 5 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Scripsit Jason Carlton:
Is there a way to change the font-family and font-size for each
individual option in a select menu?
Yes, of course. And, of course, usual CSS Caveats apply.
<select size="1">
<option style="font-family: Arial; font-size: 8px">One</option>
<option style="font-family: Tahoma; font-size: 10px">Two</option>
<option style="font-family: Verdana; font-size: 12px">Three</option>
</select>
Of course, that's absurd, but so (though maybe less obviously) is almost
any idea of setting font family or size different in different options.
I see that I can change the color using style="color: whatever", but
none of the other attributes change this way.
Oh, it's just item #2 in the usual CSS Caveats:

"Not all browsers support CSS.
Not all browser versions support CSS to the same extent.
Not all users will have enabled CSS in CSS enabled browsers.
Some users of NN may have disabled Javascript, thus disabling CSS.
Some users may have enabled their own stylesheets, disabling yours.
CSS2 and CSS-P are moving targets. Use with care.
Font specification is problematic.
Unusual caveats may apply. ;-) "

http://www.dev-archive.net/articles/...S-caveats.html
(mostly ignore the disclaimer; the content, though old, is much more
fresh and meaningful than most of the CSS stuff around)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 5 '08 #2

P: n/a
Jason Carlton wrote:
Is there a way to change the font-family and font-size for each
individual option in a select menu? Something along the lines of:

<select size="1">
<option style="font-family: Arial; font-size: 8px">One</option>
<option style="font-family: Tahoma; font-size: 10px">Two</option>
<option style="font-family: Verdana; font-size: 12px">Three</option>
</select>

I see that I can change the color using style="color: whatever", but
none of the other attributes change this way.
You can change background color too but this is circa all what you can do with
<optiontag :-)
I had similar problem as you few month ago and I resolve it by using
scrollable <divand series of checkboxes. Of course, this is workaround but
work for most used browsers.
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

Feb 5 '08 #3

P: n/a
Scripsit Jukka K. Korpela:
http://www.dev-archive.net/articles/...S-caveats.html
(mostly ignore the disclaimer; the content, though old, is much more
fresh and meaningful than most of the CSS stuff around)
I decided to write a modernized and somewhat expanded version of the CSS
Caveats:
http://www.cs.tut.fi/~jkorpela/css-caveats.html

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 9 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.