我有一个select元素,我使用第一个选项作为选择字段的标题.我想知道当选择第一个选项时是否有一种方法来在选择字段中灰色显示文本.这可以只在JS中完成,还是有CSS解决方案？
我尝试改变第一个选项的样式,但是当我激活下拉菜单时,只会更改文本的颜色.
<select> <option>Please select your favourite fruit</option> <option>Apple</option> <option>Banana</option> </select>
解决方法
我更接近你所需要的：
你需要灰色整个SELECT(所以当它被关闭,它是灰色的),然后“不灰色”所有的OPTION的(把它们变黑)和灰色的第一个孩子.这样的事情
CSS
select
{
color: #ccc;
}
option
{
color: #000;
}
option:first-child
{
color: #ccc;
}
编辑
所编辑的代码是：
HTML
<select onchange="changeMe(this)"> <option selected disabled>Please select your favourite fruit</option> <option>Apple</option> <option>Banana</option> </select>
使用Javascript
<script type="text/javascript">
function changeMe(sel)
{
sel.style.color = "#000";
}
</script>
我更新了jsFiddle.你可以在这里查看：http://jsfiddle.net/s5Xy2/5/
请注意,我也改变了HTML部分,因为我想使用“disabled”属性(因此,您还必须添加“selected”属性).
如果你仍然想要纯CSS代码,那就是：http://jsfiddle.net/s5Xy2/4/
