CSS селектор для <select>выбранного элемента, если он не пустой

Question

Я хочу стилизовать <select> для случая, когда не выбрано "Пожалуйста, выберите".

Например:

select{
color: gray;
}

select:not-empty{
color: blue;
}

HTML:

<select>
  <option value="">Empty, please gray</option>
  <option value="something">If selected, select in blue</option>
  <option value="something2">If selected, select in blue</option>
</select>

поэтому, если значение опции пусто -> серый

значение опции не пусто -> синий

Кодовый указатель: https://codepen.io/jossnaz/pen/dLxezv

что я хочу?это:

Answer 1

Проверка HTML5 может помочь вам здесь. В частности, вам нужно сделать обязательным select. Затем используйте псевдокласс :valid для стилизации.

Имейте в виду, что value="" (не определено) НЕ допустимо. Любая строка действительна, поэтому вы можете использовать ее в своих интересах.

Вот пример:

select {
  font-size: 14px;
  color: #ccc;
  padding: 5px 10px;
}
select:focus {
  outline: 0 none;
}

select:valid {
  color: blue;
}

<select required>
<option value="">Empty value isn't valid</option>
<option value="1">Valid option</option>
<option value="2">Another valid option</option>
</select>