我正在尝试将第一个选项的颜色更改为灰色,即只选择文本(选择一个选项),但这里它不起作用:
.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>
我的jsfiddle在这里jsfiddle
答案 0 :(得分:39)
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>
但正如您所看到的,因为选项中的第一项是您的选择控件显示的第一项,您无法看到其指定的颜色。如果打开选择列表并查看打开的项目,您将看到可以为第一个选项指定灰色。 所以你需要在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');
}
});
});
这是jsFiddle中的代码。
答案 1 :(得分:15)
我最近遇到了同样的问题,我找到了一个非常简单的解决方案。
您所要做的就是将第一个选项设置为禁用和选中。像这样:
<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>
这将在加载页面时显示第一个选项(灰显)。它还会阻止用户在单击列表后选择它。
答案 2 :(得分:7)
您只需将disabled
添加为option
属性
<option disabled>select one option</option>
答案 3 :(得分:4)
这是我的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>
答案 4 :(得分:2)
<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.
答案 5 :(得分:1)
尝试不使用span标记:
<option selected="selected" class="grey_color">select one option</option>
为了获得更大的灵活性,您可以使用任何JS小部件。
答案 6 :(得分:1)
您不能在选项中包含HTML代码,它们只能包含文本,但您可以将该类应用于该选项:
<option selected="selected" class="grey_color">select one option</option>
演示:http://jsfiddle.net/Guffa/hUpAB/9/
注意:
html
和head
个标记。答案 7 :(得分:0)
嗨,这对我有用
.custom-select:hover:not(:disabled),
.custom-select:focus:not(:disabled),
.custom-select:active:not(:disabled){
color: black;
}
select{
color: gray;
}