Как изменить цвет текста для первого выбора

У меня есть элемент select, который имеет несколько элементов. Я хочу изменить цвет его первого элемента, но кажется, что цвет отображается только при нажатии на выпадающий список. То, что я хочу, это изменить цвет (например, серый), когда страница загружена, чтобы пользователи могли видеть, что первый вариант цвета отличается.

Смотрите пример здесь... 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>

Ответы

Ответ 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

Ответ 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>

Ответ 3

Вы можете сделать это, используя 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; }

Ответ 4

Мне это очень понравилось (заполнители должны выглядеть одинаково для текстовых полей в виде блоков выбора), а прямой CSS не работает в Chrome. Вот что я сделал:

Сначала убедитесь, что тэг select имеет класс .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;
}

Ответ 5

Вот так, чтобы при выборе опции он стал черным. Когда вы меняете его обратно на местозаполнитель, он возвращается в цвет заполнителя (в этом случае красный).

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>