Html 如何更改选择框选项文本的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8635317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do change the color of the select box's option text?
提问by Mohammad Saberi
I am trying to change the color of the first option to grey color, that only the text (select one option) but here it's not working here:
我正在尝试将第一个选项的颜色更改为灰色，只有文本（选择一个选项），但在这里它不起作用：
.grey_color {
color: #ccc;
font-size: 14px;
}<select id="select">
<option selected="selected"><span class="grey_color">select one option</span></option>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option >five</option>
</select>My jsfiddle is here jsfiddle
我的 jsfiddle 在这里jsfiddle
回答by Mohammad Saberi
Suresh, you don't need use anything in your codes. What you need is just something like this:
Suresh，你不需要在你的代码中使用任何东西。你需要的是这样的：
.others {
color:black
}<select id="select">
<option style="color:gray" value="null">select one option</option>
<option value="1" class="others">one</option>
<option value="2" class="others">two</option>
</select>But as you can see, because your first item in options is the first thing that your select control shows, you can not see its assigned color. While if you open the select list and see the opened items, you will see you could assign a gray color to the first option. So you need something else in jQuery.
但是正如您所看到的，因为选项中的第一项是选择控件显示的第一项，所以您看不到其指定的颜色。而如果您打开选择列表并查看打开的项目，您将看到您可以为第一个选项指定灰色。所以你需要在 jQuery 中使用其他东西。
$(document).ready(function() {
$('#select').css('color','gray');
$('#select').change(function() {
var current = $('#select').val();
if (current != 'null') {
$('#select').css('color','black');
} else {
$('#select').css('color','gray');
}
});
});
This is my code in jsFiddle.
这是我在jsFiddle 中的代码。
回答by Mystikmyshel
I was recently having trouble with this same thing and I found a really simple solution.
我最近遇到了同样的问题，我找到了一个非常简单的解决方案。
All you have to do is set the first option to disabled and selected. Like this:
您所要做的就是将第一个选项设置为禁用和选中。像这样：
<select id="select">
<option disabled="disabled" selected="selected">select one option</option>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>This will display the first option (grayed out) when the page is loaded. It also prevents the user from being able to select it once they click on the list.
这将在页面加载时显示第一个选项（变灰）。它还可以防止用户在单击列表后选择它。
回答by Simone
You just need to add disabledas optionattribute
您只需要添加disabled为option属性
<option disabled>select one option</option>
回答by Fabio
Here is my demo with jQuery
这是我的 jQuery 演示
<!doctype html>
<html>
<head>
<style>
select{
color:#aaa;
}
option:not(first-child) {
color: #000;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select").change(function(){
if ($(this).val()=="") $(this).css({color: "#aaa"});
else $(this).css({color: "#000"});
});
});
</script>
<meta charset="utf-8">
</head>
<body>
<select>
<option disable hidden value="">CHOOSE</option>
<option>#1</option>
<option>#2</option>
<option>#3</option>
<option>#4</option>
</select>
</body>
</html>
回答by PureChocolate
<select id="select">
<optgroup label="select one option">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</optgroup>
</select>It all sounded like a lot of hard work to me, when optgroup gives you what you need - at least I think it does.
当 optgroup 为您提供您需要的东西时，这对我来说听起来像是很多艰苦的工作 - 至少我认为它确实如此。
回答by Minko Gechev
Try just this without the span tag:
在没有 span 标签的情况下试试这个：
<option selected="selected" class="grey_color">select one option</option>
For bigger flexibility you can use any JS widget.
为了获得更大的灵活性，您可以使用任何 JS 小部件。
回答by Guffa
You can't have HTML code inside the options, they can only contain text, but you can apply the class to the option instead:
您不能在选项中包含 HTML 代码，它们只能包含文本，但您可以将类应用于选项：
<option selected="selected" class="grey_color">select one option</option>
Demo: http://jsfiddle.net/Guffa/hUpAB/9/
演示：http: //jsfiddle.net/Guffa/hUpAB/9/
Note:
笔记：
- The support for styling options varies between browsers. In modern brosers you generally can expect support for coloring but not for font size. A browser in a phone for example usually doesn't display the options in a dropdown, so the styling would not be relevant at all.
- You should not have
htmlandheadtags in the HTML code in jsfiddle. - You should name your classes for what the represent, not how they look.
- 对样式选项的支持因浏览器而异。在现代兄弟中，您通常可以期望支持着色，但不支持字体大小。例如，手机中的浏览器通常不会在下拉列表中显示选项，因此样式根本不相关。
- 您不应该在 jsfiddle 的 HTML 代码中使用
html和head标记。 - 你应该为你的类命名代表什么，而不是它们的外观。
