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

Question

我有一个包含多个项目的选择元素。我想更改其第一项的颜色，但似乎只有在单击选择下拉菜单时才会显示颜色。我想要的是在加载页面时更改颜色（如灰色），以便用户可以看到第一个选项颜色不同。

请参阅此处的示例... http://jsbin.com/acucan/4/

CSS：

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

html:

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>

Answer 1

如果将第一项用作占位符（空值）并且您的选择是，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 2

那这个呢：

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

<select>
  <option>one</option>
  <option>two</option>
</select>

http://jsbin.com/acucan/9

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>

Answer 5

您可以使用 CSS 来做到这一点：JSFiddle

HTML：

<select>
    <option>Text 1</option>
    <option>Text 2</option>
    <option>Text 3</option>
</select>

CSS：

select option:first-child { color:red; }

或者，如果您绝对需要使用 JavaScript（不建议这样做）：JSFiddle

JavaScript：

$(function() {
    $("select option:first-child").addClass("highlight");
});

CSS：

.highlight { color:red; }

Answer 6

我真的很想要这个（文本框的占位符应该看起来和选择框一样！）并且直接的 CSS 在 Chrome 中不起作用。这是我所做的：

首先确保您的选择标签有一个.has-prompt类。

然后在document.ready.

# Adds a class to select boxes that have prompt currently selected.
# Allows for placeholder-like styling.
# Looks for has-prompt class on select tag.
Mess.Views.SelectPromptStyler = Backbone.View.extend
  el: 'body'

  initialize: ->
    @$('select.has-prompt').trigger('change')

  events:
    'change select.has-prompt': 'changed'

  changed: (e) ->
    select = @$(e.currentTarget)
    if select.find('option').first().is(':selected')
      select.addClass('prompt-selected')
    else
      select.removeClass('prompt-selected')

然后在 CSS 中：

select.prompt-selected {
  color: $placeholder-color;
}