changing style of a select HTML option [duplicate]

Question

Possible Duplicate:
how to style the option of a html “select”?

I have an HTML element and I want one of the options to be in italic. I don't remember where but I've seen select elements that have a combination of bold fonts and regular fonts; may be it was a custom-built control.

Here's the HTML:

<select>
   <option>select a timezone</option>
   <option value="0">Casablanca</option>
   <option value="0">Dublin, Edinburgh, Lisbon, London</option>
   <option value="60">Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
   <option value="60" style="font-style:italic;">Brussels, Copenhagen, Madrid, Paris</option>
</select>

And here is the jsfiddle.

Thanks for your suggestions.

you're going to find options to style options very limited as IE and Safari have issues applying the full CSS spectrum to an option: webbugtrack.blogspot.ca/2007/11/… and in particular italic won't work in IE, Safari, or Chrome :-( — scunliffe
– scunliffe, Commented Nov 7, 2012 at 20:18

alanmanderson · Accepted Answer · 2012-11-07 20:06:44Z

2

Here is a great reference on how to use font-style on an option tag. It seems that you can't do it in certain browsers, and there are certain limitations.

edited Nov 7, 2012 at 20:06

answered Nov 7, 2012 at 20:01

alanmanderson

8,31012 gold badges56 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bluetoft · Accepted Answer · 2012-11-07 20:15:40Z

1

option:nth-child(3){
 font-style:italic
}

http://jsfiddle.net/E7r8w/2/

alternatively you can use javascript.

http://jsfiddle.net/E7r8w/3/

edited Nov 7, 2012 at 20:15

answered Nov 7, 2012 at 20:01

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

2 Comments

alanmanderson Over a year ago

This doesn't seem to work in Chrome, or IE. Does it work for you?

bluetoft Over a year ago

@ajon I didn't test in Chrome or IE... just firefox. i think the nth-child() selector is css3.

Collectives™ on Stack Overflow

changing style of a select HTML option [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related