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

How to change the text color of first select option

提问by konekoya

I have a select element which has several items. I want to change the color of its first item, but it seems the color only shows when you click on the select dropdown. What I want is to change the color (like gray) when the page is loaded so users can see the first option color is different.

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

See the example here... http://jsbin.com/acucan/4/

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

css:

css：

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

html:

html：

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

采纳答案by mnsr

What about this:

那这个呢：

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

http://jsbin.com/acucan/9

http://jsbin.com/acucan/9

回答by Oscar Barrett

If the first item is to be used as a placeholder (empty value) and your select is requiredthen you can use the :invalidpseudo-class to target it.

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

回答by glautrou

You can do this by using CSS: JSFiddle

你可以通过使用 CSS 来做到这一点：JSFiddle

HTML:

HTML：

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

CSS:

CSS：

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

Or if you absolutely need to use JavaScript (not adviced for this): JSFiddle

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

JavaScript:

JavaScript：

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

CSS:

CSS：

.highlight { color:red; }

回答by smoyth

I really wanted this (placeholders should look the same for text boxes as select boxes!) and straight CSS wasn't working in Chrome. Here is what I did:

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

First make sure your select tag has a .has-promptclass.

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

Then initialize this class somewhere in document.ready.

然后在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')

Then in CSS:

然后在 CSS 中：

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

回答by Chloe

Here is a way so that when you select an option, it turns black. When you change it back to the placeholder, it turns back into the placeholder color (in this case red).

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

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

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

It requires the options to have values.

它要求选项具有值。

$('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>