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

Posted 2023-02-21

技术标签:

【中文标题】如何设置选择标签的选项元素的样式？【英文标题】：How to style a select tag's option element? 【发布时间】：2011-08-18 17:33:06 【问题描述】：

我正在尝试在 Google Chrome 的 select 下拉菜单中设置 option 的样式。它适用于除 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 中的选项设置样式？选择后，背景颜色不会显示。

【问题讨论】：

我只是想让选项代码在 Chrome 中工作。在 chrome 中对我来说很好，只是在选择时它会失去红色背景。只有字体更改在 Mac 上的 Safari 中有效（字体大小 + 字体粗细）这在 Chrome 中不适合我。 :-\ 我正在使用 chrome for mac。第 11 版长话短说，当您的操作系统呈现下拉菜单时，这可能是显示样式集的差异。 OS X 上的 Chrome 似乎不允许进行任何自定义，而 Windows 7/8 上的 Chrome 允许进行广泛的自定义。 【参考方案1】：

这道题真的是多题合二为一。它们是不同的造型方式。以下是此问题中问题的链接：

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>?

【讨论】：

【参考方案2】：

自 49+ 版起，Chrome 支持使用 font-weight 设置 <option> 元素的样式。来源：https://code.google.com/p/chromium/issues/detail?id=44917#c22

新的 SELECT 弹出窗口：应该应用字体粗细样式。

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

有一个 Chrome 样式表，themeChromiumSkia.css，一直使用font-weight: normal !important;。在 49.0 版本中引入了稳定的 Chrome 频道。

【讨论】：

这就是为什么我强调每隔几天对我的代码库中的字符串进行 grep 处理，例如 !important。【参考方案3】：

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

我怀疑这是为了与本地选择列表保持一致。（以移动设备为例）。

我想到了 3 个解决方案：

使用Select2，它实际上将您的选择转换为uls（允许做很多事情）将您的selects 拆分为多个以便对值进行分组拆分成optgroup

【讨论】：

你是对的。明确的选择是在 CSS2 时代做出的，因为当时浏览器使用平台 UI 小部件来呈现浏览器 UI 小部件，并且平台 UI 小部件通常支持比 CSS 想要的更有限的样式。如今，FF 和 IE 已经开始自行渲染所有控件；除了手机FF以外的手机浏览器都有这个问题； Chrome 正在实现这一目标； Desktop Safari 和 Opera 落后了。我同意皮埃尔和@John 的观点。我已经用 jQuery UI 的 selectMenu 替换了一个巨大的客户端站点上的所有选择框，因为 JQUI 已经可用。【参考方案4】：

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

$('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');
 
);

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

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

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

【讨论】：

【参考方案5】：

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

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

【讨论】：

这并不完全正确。实际上，下拉菜单支持哪一组样式取决于操作系统。有趣的是，样式选项似乎适用于 Windows 7/8，我可以肯定地说它不适用于 OS X (10.8)。现代浏览器确实支持 OPTION 标签的样式 - 为标签添加样式属性有一种方法可以改变<option>标签的字体大小，见：***.com/a/15830167/247696【参考方案6】：

实际上，我最近发现了一些东西，似乎可以在 Chrome、Firefox 和 IE 中使用纯 CSS 为单个 <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/

【讨论】：

这在使用 Chrome 的 Mac 中不起作用。在 Mac OSX 版本 10.9.2 上测试。我正在运行 Windows 7，这似乎工作正常。我实际上并不喜欢这种方法，因为它似乎只支持 background-color 和 color CSS 属性。对于 Windows 7 中的 chrome，它不会为选择框着色，只有下拉框中的选项。因此，如果您选择彩色选项，一旦选择它就会有不同的颜色。我在 Ubuntu 16.04 64 位上安装了 FireFox 58.0.2，它不支持选项背景和颜色样式。

以上是关于如何设置选择标签的选项元素的样式？的主要内容，如果未能解决你的问题，请参考以下文章