Question

我想根据特定的类为select中的每个选项设置不同的背景颜色。

 <select>
  <option class="yellow" value="1">Yellow</option>
  <option class="red" value="2">Red</option>
  <option class="green" value="3">Green</option>
</select>

所以当我点击选择时，会出现以下情况： enter image description here

我希望当我打开select时，每个选项都将具有类的颜色作为背景，所以像这样：

enter image description here

Answer 1

你应该使用你的班级“黄色，红色，绿色”并在你的css中给它们颜色

HTML

   <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collors</title>
</head>
<body>

<select>
  <option class="yellow" value="1">Yellow</option>
  <option class="red" value="2">Red</option>
  <option class="green" value="3">Green</option>
</select>

</body>
</html>

css

<style>
    .yellow{
        background-color: yellow;
    }    
    .red{
        background-color: red;
    }    
    .green{
        background-color: green;
    }
</style>

Answer 2

没有上课就很容易做到这一点：）

   select option:nth-child(1) {
        background: yellow;
    }
    select option:nth-child(2) {
        background: red;
    }
    select option:nth-child(3) {
        background: green;
    }

或

select option:nth-of-type(1) {
            background: yellow;
        }
        select option:nth-of-type(2) {
            background: red;
        }
        select option:nth-of-type(3) {
            background: green;
        }

example

以及自动获取颜色和设置背景的jQuery示例

jquery example

$("select option").each(function(){
    var color = $(this).attr("class");

    $(this).css("background", color);
});

火狐

enter image description here

chrome

enter image description here

Internet Explorer

enter image description here

Answer 3

我遇到了这个脚本的问题，因为当OSX上的safari显示时，它不会使选择内部的选项着色。我终于发现通过使用Bootstrap它一切都按照我的意图运作：

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8" />
    <title>font test</title>
    <meta name="generator" content="BBEdit 10.5" />

    <link rel="stylesheet" type="text/css" href="yourpathto/css/bootstrap.min.css" async />
</head>
<body>
    <!-- test color dropdown -->
    <style>
    .hex1{background-color:#eee;}
    .hex2{background-color:red;}
    .hex3{background-color:navy;}
    .hex4{background-color:purple;}
    </style>
    <div id="colordropdown1" class="dropdown" style="width: 300px;">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een kleur
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation" class="hex1"><a role="menuitem">Grijs</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="hex2"><a role="menuitem">Rood</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="hex3"><a role="menuitem">Marine</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="hex4"><a role="menuitem">Paars</a></li>
    <li role="presentation" class="divider"></li>
    </ul>
    </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="yourpathto/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="yourpathto/js/bootstrap.js"></script>
</body>
</html>

为每个选项选择不同的项目背景颜色

3 个答案: