Question

我正在尝试创建一个下拉列表，允许用户从颜色列表中进行选择。我想要每个＆lt;选项＆gt;的背景item为用户可以选择的颜色。作为概念证明，我创建了这个小html页面：＆lt;！DOCTYPE html＆gt; ＆LT; HTML＆GT; ＆LT; HEAD＆GT; ＆lt; style media =“screen”type =“text / css”＆gt; .white {background-color：white;} .red {background-color：red;} .yellow {background-color：yellow;} .green {background-color：green;} ＆LT; /风格＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆lt; h2＆gt;选择颜色＆lt; / h2＆gt; ＆LT;选择＆GT; ＆lt; option class =“white”＆gt;这应该有一个白色背景＆lt; / option＆gt; ＆lt; option class =“red”＆gt;这应该有一个RED背景＆lt; / option＆gt; ＆lt; option class =“yellow”＆gt;这应该有一个黄色背景＆lt; / option＆gt; ＆lt; option class =“green”＆gt;这应该有一个绿色背景＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; /体＆GT; ＆LT; / HTML＆GT; 当我在Firefox上运行它时，无论是在PC还是Mac上，它看起来都很棒。但是，在Mac上的Chrome上进行测试时，它不会显示这些背景颜色。以下是在Chrome中呈现页面后我点击选择对象的屏幕截图：您可以看到该列表只是带有灰色背景的标准格式。您还可以看到项目与正确的类连接。我知道在这个问题上有一些帖子，这是我从中获取初始代码的地方。但是，我在这个问题上阅读的帖子都没有为我工作。我究竟做错了什么？谢谢！

Answer 1

样式选项在不同的操作系统上存在一些问题。您是否被允许使用bootstrap-select之类的任何插件？由于元素是li，这肯定会达到你想要的效果

Answer 2

在您提供的链接中，给出的答案是使用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 3

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

使用Chrome

3 个答案: