Можно ли изменить выбранный пустой цвет только с помощью CSS

Question

<select>
  <option disabled selected>＝select＝</option>
  <option>1</option>
</select>

Когда пользователь видит ＝ ＝ выберите ＝ 」, я хочу, чтобы цвет был серым.
И когда выбран 「1」, цвет черный, как это изображение:

select { color: black; }

select:empty { color: gray; }
//invalid

Можно ли изменить цвет только с помощью css? Спасибо!

Answer 1

Вы можете использовать функцию для изменения class элемента select onchange:

var myselect = document.getElementById("select1");

function colourFunction() {
  var colour = myselect.options[myselect.selectedIndex].className;
  myselect.className = colour;
}

// Call function on load:
colourFunction();

.color_gray {
  color: gray;
}

.color_black {
  color: black;
}

<select id="select1" onchange="colourFunction()">
  <option disabled selected class='color_gray'>＝select＝</option>
  <option class='color_black'>1</option>
</select>

Обратите внимание, что я также использовал цветные class es для option элементов. Но это не обязательно.

Надеюсь, это поможет.