Question

我正在尝试在Google Chrome中的option下拉菜单中设置select的样式。它适用于除IE9和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>

如果不使用JavaScript，有没有办法为Google Chrome中的选项设置样式？选择后，背景颜色不会显示。

Answer 1

不幸的是，除了<option>和color之外，WebKit浏览器还不支持background-color标记的样式。

最广泛使用的跨浏览器解决方案是使用<ul> / <li>并使用CSS设置样式。像Bootstrap这样的框架做得很好。

Answer 2

这是一个选择（来自浏览器开发人员或W3C，我找不到任何关于样式选择选项的W3C规范），但不允许选择样式选项。

我怀疑这是为了与原生选择列表保持一致（例如考虑移动设备）。

我想到了3种解决方案：

使用Select2实际将您的选择转换为ul s（允许许多内容）
将您的select拆分为多个，以便对值进行分组
分为optgroup

Answer 3

我最近发现了一些似乎适用于使用纯CSS在Chrome，Firefox和IE中构建单个<option></option>元素的内容。

也许，请尝试以下方法：

<强> HTML：

<select>
    <option value="blank">Blank</option>
    <option class="white" value="white">White</option>
    <option class="red" value="red">Red</option>
    <option class="blue" value="blue">Blue</option>
</select>

<强> CSS：

select {
    background-color:#000;
    color: #FFF;
}

select * {
    background-color:#000;
    color:#FFF;
}

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */
    background-color:#F00;
    color:#FFF;
}

select *.white {
    background-color:#FFF;
    color:#000;
}

select *.blue {
    background-color:#06F;
    color:#FFF;
}

奇怪的是，谨慎对待风。但它似乎不支持:active :hover :focus :link :visited :after :before。

关于JSFiddle的示例：http://jsfiddle.net/Xd7TJ/2/

Answer 4

Chrome的未来版本（49 +）现在支持使用<option>设置样式font-weight元素。资料来源：https://code.google.com/p/chromium/issues/detail?id=44917#c22

新的SELECT弹出窗口：应该应用font-weight样式。

此CL删除themeChromiumSkia.css。其中|!important|被阻止了   申请font-weight。现在html.css有|font-weight:normal|，和   |!important|应该是不必要的。

Chrome样式表themeChromiumSkia.css一直使用font-weight: normal !important;。它应该是49.0版本的稳定Chrome频道。

Answer 5

我有一个使用jquery的解决方法...虽然我们无法设置特定选项的样式，但我们可以设置选择本身的样式 - 并使用javascript根据所选内容更改选择的类。它适用于简单的情况。

＆＃13;

$('select.potentially_red').on('change', function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});
$('select.potentially_red').each( function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});

＆＃13;

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

＆＃13;

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- The js will affect all selects which have the class 'potentially_red' -->
<select name="color" class="potentially_red">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

＆＃13;

请注意，js分为两部分，each部分用于正确初始化页面上的所有内容，.on('change', ...部分用于响应更改。我无法将js变成一个干掉它的函数，它因某种原因打破了它

Answer 6

这个问题实际上是多个问题合而为一。它们是某些样式的不同方式。以下是此问题中各个问题的链接：

font-family

<option>：
- 问题：How to apply font family in HTML tag of select option

font-size

<option>：
- 问题：How do I change the font-size of an <option> element within <select>?

background-color

<option>：
- 问题：How can I set the background color of <option> in a <select> element?

font-weight

<option>：
- 问题：HTML font weight property on OPTION of HTML SELECT

color

<option>：
- 问题：How do change the color of the text of an <option> within a <select>?

如何设置选择标签的选项元素的样式？

6 个答案: