如何更改第一个选择选项的文本颜色

Question

我有一个选择元素有几个项目.我想改变它的第一个项目的颜色.但似乎只有在您单击选择下拉列表时才会显示颜色.我想要的是在加载页面时更改颜色(如颜色灰色),以便用户可以看到第一个选项颜色已更改.

看这里的例子...... http://jsbin.com/acucan/4/

谢谢你的回答!这是我第一次在这里发帖提问.抱歉我的英文.我希望我明白这个问题.

谢谢

Answer 1

那这个呢:

select{
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;
}
select option { color: black; }
select option:first-child{
  color: green;
}

http://jsbin.com/acucan/9

Answer 2

如果要将第一个项目用作占位符(空值)并且您的选择是,required那么您可以使用:invalid伪类来定位它.

select {
  -webkit-appearance: menulist-button;
  color: black;
}

select:invalid {
  color: green;
}

<select required>
  <option value="">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
</select>

Answer 3

对于用作占位符的选项 1：

select:invalid { color:grey; }

所有其他选项：

select:valid { color:black; }

Answer 4

这是一种方法，当您选择一个选项时，它会变成黑色。当您将其更改回占位符时，它会变回占位符颜色（在本例中为红色）。

http://jsfiddle.net/wFP44/166/

它要求选项具有值。

$('select').on('change', function() {
  if ($(this).val()) {
return $(this).css('color', 'black');
  } else {
return $(this).css('color', 'red');
  }
});

select{
  color: red;
}
select option { color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Pick one...</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>