HTML <select> 背景颜色 <option> 标签使用 Chrome

Question

我正在尝试创建一个下拉列表，允许用户从颜色列表中选择 select。我希望每个 <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 对象：

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

我知道在这个问题上有一些 posts，这是我从中获得初始代码的地方。但是，我阅读的有关此问题的帖子中 none 对我有用。

我做错了什么？谢谢！

Answer 1

在您提供的 link 中，给出的答案是使用 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 属性以表明您可以控制的不仅仅是背景颜色。

Answer 2

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

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

Answer 3

样式选项在不同 OS 上存在一些问题。是否不允许使用任何插件，如 bootstrap-select？既然元素是li，这一定能达到你的目的

HTML <select> 背景颜色 <option> 标签使用 Chrome

HTML <select> with background-color <option> tags using Chrome

html

css

html-select

google-chrome