css - 是否可以仅使用 css 更改选择空颜色

Question

<select>
  <option disabled selected>＝select＝&lt;/option>
  <option>1</option>
</select>

当用户看到「＝select＝」时，我希望颜色是灰色的。
And when selected 「1」, the color is black like this image:

select { color: black; }

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

是否可以仅使用 css 更改颜色？谢谢！

标签： css

Answer 1

您可以使用函数来更改元素class的：selectonchange

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＝&lt;/option>
  <option class='color_black'>1</option>
</select>

请注意，我还在元素上使用了彩色classes 。option但这不是强制性的。

希望能帮助到你。