-3

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.

Community
  • 1
  • 1
frenchie
  • 51,731
  • 109
  • 304
  • 510
  • 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: http://webbugtrack.blogspot.ca/2007/11/bug-291-no-styling-options-in-ie.html and in particular italic won't work in IE, Safari, or Chrome :-( – scunliffe Nov 07 '12 at 20:18

2 Answers2

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.

ajon
  • 7,868
  • 11
  • 48
  • 86
1
option:nth-child(3){
 font-style:italic
}

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

alternatively you can use javascript.

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

bluetoft
  • 5,373
  • 2
  • 23
  • 26