在选择选项中更改颜色 - HTML/CSS/JQuery - Mac

Question

我想在选择下拉列表中更改几个选项的文本颜色。

我不在乎选择哪一个。我只是想让用户在打开下拉菜单时看到一些选项为黄色(在本例中(。

<select>
<option>Black</option>
<option>Black</option>
<option style="color: rgb(255, 255, 0);">Yellow</option>
</select>

这是我的JSFiddle

Stackoverflow中的其他解决方案在Chrome 59中对我不起作用。

我还希望能够像这样用Javascript/JQuery改变选项的颜色：

var option = AJS.$('<option>', {...});
option.css("color", "#2ee4ff");

但是，我根本无法使颜色起作用。

Answer 1

你可以试试这个：

$("select option").each(function(){
	value=$(this).val();
$(this).css("color",value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Black</option>
<option>Black</option>
<option>Yellow</option>
</select>

Answer 2

很久以前，我对设置选择框样式的可能性感到沮丧，并创建了一个替代方案。也许这对你有帮助。

它使用ul来显示选项，并将所选值存储在屏幕上显示的div和input标签中以供进一步处理。

$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var selected = $(this).find("span").html();
$(".selected").html(selected);
$("input[name='mySelect']").val(selected);
$(".options").toggleClass("open");
});

.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
.yellow {
color: yellow;
}
.blue {
color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<form>
<input type="hidden" name="mySelect" value="">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option yellow"><span>Option 1</span></li>
<li class="option"><span>Option 2</span></li>
<li class="option blue"><span>Option 3</span></li>
</ul>
</form>
</div>