如何更改下拉列表项的font-family？

Question

我有一个列出字体系列的下拉列表.像Tahoma,Arial,Verdana等.我想根据它代表的值更改每个下拉项的font-family.就像Photoshop一样.

我为每个下拉项更改了CSS,但它只适用于FireFox.它不适用于任何其他浏览器.

我不想使用任何jQuery插件.

Answer 1

那是因为子select元素option不是真正的样式,而firefox似乎是唯一忽略该部分规范的浏览器.

解决方法是select使用自定义窗口小部件替换您的元素,该窗口小部件仅使用可设置样式的元素,并且可能只需要一些javascript来实现交互性.喜欢这里做的:http://jsfiddle.net/sidonaldson/jL7uU/或http://jsfiddle.net/theredhead/4PQzp/

Answer 2

你可以做这样的事情

<select>
<optgroup style="font-family:arial">
    <option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
    <option>veranda</option>
</optgroup>