Изменить Выберите так, чтобы только первый был серым

У меня есть элемент select, и я использую первый option как заголовок поля select. Мне интересно, есть ли способ вычеркнуть текст внутри поля select при выборе первого параметра. Можно ли это сделать только в JS, или есть решение для CSS?

Я попытался изменить стиль первого option, но только меняет цвет текста при активации выпадающего меню.

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

Ответ 1

Сентябрь 2017 г.

Вы должны взглянуть на ответ Тессы ниже, так как это только CSS и намного лучше! Этот ответ почти 5 лет, так что все немного изменилось. Я сохраняю оригинальный ответ только для справки.

Оригинальный ответ

Я ближе к тому, что вам нужно:

Вам нужно засереть весь SELECT (чтобы при закрытии он был серым), затем "un-gray" все OPTION (поместили их в черный цвет) и серого первого ребенка. Что-то вроде этого:

CSS

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

ИЗМЕНИТЬ Итак, отредактированный код:

HTML

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

Javascript

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

У меня есть обновление jsFiddle. Вы можете проверить это здесь: http://jsfiddle.net/s5Xy2/5/

Заметьте, что я также изменил часть HTML, потому что я думаю, что вы хотите использовать атрибут "disabled" (и из-за этого вам также придется добавить атрибут "selected" ).

Если вам все еще нужен чистый CSS-код, он здесь: http://jsfiddle.net/s5Xy2/4/

Ответ 2

Вот более современное решение, поэтому оно не относится к первому варианту, а скорее к недопустимой опции и не требует, чтобы JS отображал только параметр title/placeholder как серый, тогда как остальные выглядели нормально.

select,
select option {
  color: #000000;
}

select:invalid,
select option[value=""] {
  color: #999999;
}

/*Added for browser compatibility*/
[hidden] {
  display: none;
}

<select required>
      <option value="" selected disabled hidden>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
</select>

Ответ 3

Вдохновленный решением Fábio Silva, очень крутой раствор с использованием AngularJS:

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

Ответ 4

Вы можете изменить код на мой код:

<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>

Этот код устанавливает первый цвет элемента серый.

Я надеюсь помочь вам...