如何设置选择标签的选项元素的样式？ [英] How to style a select tag's option element?

问题描述

我想在Google Chrome中的选择下拉菜单中设置选项的样式。它可以在除IE9和Chrome之外的所有浏览器中使用。

  option.red {background-color：＃cc0000; font-weight：bold; font-size：12px; color：white;}  

 < select name = > < option class =redvalue =red>红色< / option> < option value =white>白色< / option> < option value =blue> Blue< / option> < option value =green>绿色< / option>< / select>  

不使用JavaScript，是否有一种方法可以将风格设置为Google Chrome中的选项？一旦选择，背景颜色不会显示。

解决方案

不幸的是，WebKit浏览器不支持 ;选项> 标签，除了 color 和 background-color 。 >

最广泛使用的跨浏览器解决方案是使用< ul> / < li& 并使用CSS对它们进行样式化。 Bootstrap 等框架可以做到这一点。

I'm trying to set the style of an option in a select dropdown menu in Google Chrome. It works in all browsers except IE9 and Chrome.

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.

解决方案

Unfortunately, WebKit browsers do not support styling of <option> tags yet, except for color and background-color.

The most widely used cross browser solution is to use <ul> / <li> and style them using CSS. Frameworks like Bootstrap do this well.

这篇关于如何设置选择标签的选项元素的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！