Html 我给出了我所知道的最接近CSS的唯一解决方案。然后（它被标记为编辑），我也给了他一个最小的JS解决方案。如果您找到一个更好的、仅限于CSS的解决方案，请告诉我。：）在JS示例中选择其他项目后，无法重新选择第一个（灰色）项目。在CSS示例中选择时，所有项目都

---

我给出了我所知道的最接近CSS的唯一解决方案。然后（它被标记为编辑），我也给了他一个最小的JS解决方案。如果您找到一个更好的、仅限于CSS的解决方案，请告诉我。：）在JS示例中选择其他项目后，无法重新选择第一个（灰色）项目。在CSS示例中选择时，所有项目都是灰色的。这对我来说是有效的，但在选择有效项目时会引发异常：ReferenceError:changeMe未在HtmlSelect元素中定义。OnChange这对我来说非常有效，是一个超级干净的解决方案！谢谢Tessa，使用

：invalid

是一个很好的解决方案，对我的用例也非常有效我非常喜欢这个解决方案，苔莎！因为我的答案差不多有5年了，而这一个更好地解决了这个问题，并且只使用CSS，所以我将编辑我的答案并指向这一个。@Tessa首先，感谢您的努力！事实上，前一个版本中已经隐藏了第一个选项。这是我的错，我没有说明什么不起作用，问题是颜色。在代码片段中，它总是设置为黑色，即使在新版本中使用。但它在最后2次选择的代码笔中工作（并且仅与规格化一起工作）。这里是Safari中工作代码笔的简化版本：（仍然使用normalize.css），我注意到上面的示例没有隐藏代码。看来这只是一次有趣的旅行：

<select>
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

<select id="drop">
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<style type="text/css">
#drop :first-child
{
color:gray;
}
</style>

select
{
    color: #ccc;
}
option
{
    color: #000;
}
option:first-child
{
    color: #ccc;
}

<select onchange="changeMe(this)">
  <option selected disabled>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>

select {
  color: #ccc;
}
option {
  color: #aaa;
}
option:first-child {
  color: #ccc;
}
select.ng-dirty {
  color: #aaa;
}