使用 Chrome 的带有背景色 <option> 标签的 HTML <select>答案

【问题标题】：HTML <select> with background-color <option> tags using Chrome使用 Chrome 的带有背景色 <option> 标签的 HTML <select>
【发布时间】：2016-07-14 08:32:03
【问题描述】：

我正在尝试制作一个允许用户从颜色列表中进行选择的下拉列表。我希望每个 <option> 项目的背景是用户可以选择的颜色。作为概念证明，我制作了这个小 html 页面：

<!DOCTYPE html>
<html>
<head>

    <style media="screen" type="text/css">
        .white  {background-color:white;}
        .red    {background-color:red;}
        .yellow {background-color:yellow;}
        .green  {background-color:green;}
    </style>

</head>
<body>

    <h2>Choose Color</h2>
    <select>
        <option class="white">This should have a WHITE background</option>
        <option class="red">This should have a RED background</option>
        <option class="yellow">This should have a YELLOW background</option>
        <option class="green">This should have a GREEN background</option>
    </select>

</body>
</html>

当我在 Firefox 上运行它时，无论是在 PC 还是 Mac 上，它看起来都很棒。但是，在 Mac 上的 Chrome 上对其进行测试，它不会显示这些背景颜色。这是页面在 Chrome 中呈现后的屏幕截图，我点击了select 对象：

您可以看到该列表只是带有灰色背景的标准格式。您还可以看到这些项目与正确的类相关联。

我知道在这个问题上有几个posts，这是我获得初始代码的地方。但是，我阅读的有关此问题的帖子均不适合我。

我做错了什么？谢谢！

【问题讨论】：

可能duplicate
无法理解每个选项颜色应该是可见的，对吗？
@David784 - 这是我链接到的确切帖子。我试过这个，但它不适合我。
您的代码运行良好。 jsfiddle.net/zacvybc5
@NifrasIsmail - 是的，这就是重点。我希望它看起来有点像彩虹。下拉列表中的每一行都有自己的背景颜色，具体取决于它所分配到的类。

标签： html css google-chrome html-select

【解决方案1】：

样式选项在不同的操作系统上存在一些问题。不能用bootstrap-select这样的插件吗？既然元素是li，那么这一定会完成你想要的

【讨论】：

我应该可以使用那个插件。你介意让我快速了解如何使用它来设置选择对象的样式吗？好建议。谢谢！
只需添加上面的脚本，你想要实现的是他们的文档silviomoreto.github.io/bootstrap-select/examples/…
是的，我想通了。但是，我仍然有同样的问题 - 它适用于 Firefox，但不适用于 Chrome。
你的意思是即使使用 bootstrap-select 插件它也不会在 chrome 上工作？这很奇怪，因为它对我有用。带有 Mac 操作系统的 Chrome。
是的，这就是我的意思。您介意发布您的代码，尤其是标题链接吗？那可能是我的问题。我使用了 Silvio Moreto 网站上的确切代码，但仍然没有爱。再次感谢。

【解决方案2】：

@Randal 在这里您可以检查您的代码是否正常工作。在底部运行代码sn -p

<head>

    <style media="screen" type="text/css">
        .white  {background-color:white;}
        .red    {background-color:red;}
        .yellow {background-color:yellow;}
        .green  {background-color:green;}
    </style>

<body>

    <h2>Choose Color</h2>
    <select>
        <option class="white">This should have a WHITE background</option>
        <option class="red">This should have a RED background</option>
        <option class="yellow">This should have a YELLOW background</option>
        <option class="green">This should have a GREEN background</option>
    </select>

【讨论】：

谢谢。当我运行您的代码 sn-p 时，它对我不起作用。一定是关于 Chrome / OSX 的吧？
现在在 Mac 上检查您的浏览器 chrome。它应该工作
糟糕。好吧，可能是这样。
是的@Randall 这是后面的一个大问题。 stackoverflow.com/questions/7630010/…

【解决方案3】：

在您提供的链接中，给出的答案是使用 JavaScript 和一些 CSS 操作，这对我来说工作正常：

<!DOCTYPE html>
<html>
<head>

    <style media="screen" type="text/css">
        .white  {background-color:white;color:red;}
        .red    {background-color:red;color:black;}
        .yellow {background-color:yellow;color:black;}
        .green  {background-color:green;color:white;}
    </style>


</head>
<body>

    <h2>Choose Color</h2>
    <select>
        <option class="white">This should have a WHITE background</option>
        <option class="red">This should have a RED background</option>
        <option class="yellow">This should have a YELLOW background</option>
        <option class="green">This should have a GREEN background</option>
    </select>

    <script>
        var select = document.querySelector('select');
        var colorChange = function(){
            var color = select.options[select.selectedIndex].className;
            select.className = color;
            select.blur();
        };
        select.addEventListener('change', colorChange);
        colorChange();
    </script>

</body>
</html>

我还在几个类中添加了color 属性，以表明您可以操纵的不仅仅是背景颜色。

【讨论】：

谢谢。您使用的是什么浏览器/操作系统？我发现它可以在 PC 上的 Firefox 中正常工作，但不能在 Mac 上的 Chrome 中正常工作。我编辑了我的帖子，将问题集中在那个浏览器上。
我在 Chrome、FF 和 IE 上测试过，但我使用的是 Windows。
@faino - 这令人印象深刻 - 我以前从未见过。它仅仅是 HTML 5 吗？ - 我被 4 困住了……
@TonyDuffill - 早在 2004 年就有关于这样做的帖子，所以它应该能够在 HTML5 之前完成。试试看（只是不在 Chrome for Mac 上！）。
@Randall - 谢谢，是的，我已经尝试过了 - 奇怪的是，这些年来我一直没有这样做 - 我总是被告知选项元素不能设置样式。