我想根据特定的类为select中的每个选项设置不同的背景颜色。
<select>
<option class="yellow" value="1">Yellow</option>
<option class="red" value="2">Red</option>
<option class="green" value="3">Green</option>
</select>
所以当我点击选择时，会出现以下情况：
我想当我打开select时，每个选项都将具有类的颜色作为背景，所以这样的事情：
如果没有课程，很容易做到这样:)
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;
}
以及使用jQuery自动获取颜色和设置背景的示例
$("select option").each(function(){
var color = $(this).attr("class");
$(this).css("background", color);
});
火狐
铬
IE浏览器
你应该使用你的班级“黄色，红色，绿色”并在你的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>
我遇到了这个脚本的问题，因为它不会在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>