更改选择 HTML 选项的样式 [重复]答案

【问题标题】：changing style of a select HTML option [duplicate]更改选择 HTML 选项的样式 [重复]
【发布时间】：2012-10-27 22:49:59
【问题描述】：

可能重复：
how to style the option of a html “select”?

我有一个 HTML 元素，我希望其中一个选项以斜体显示。我不记得在哪里，但我见过一些结合了粗体和常规字体的元素；可能是自定义控件。

这是 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>

这里是jsfiddle.

感谢您的建议。

【问题讨论】：

你会发现样式选项的选项非常有限，因为 IE 和 Safari 在将完整的 CSS 范围应用于选项时遇到问题：webbugtrack.blogspot.ca/2007/11/… 尤其是斜体在 IE、Safari 中不起作用, 或 Chrome :-(

标签： html css

【解决方案1】：

Here 是关于如何在选项标签上使用字体样式的一个很好的参考。在某些浏览器中似乎无法做到，并且有一定的限制。

【讨论】：

【解决方案2】：

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

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

您也可以使用 javascript。

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

【讨论】：

这似乎不适用于 Chrome 或 IE。它对你有用吗？
@ajon 我没有在 Chrome 或 IE 中测试...只是 firefox。我认为 nth-child() 选择器是 css3。