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

Question

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

当用户看到「＝select＝」时，我想要的颜色是灰色。
当选择「1」时，颜色为黑色，如下图:

select { color: black; }

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

是否可以只用 css 改变颜色？谢谢!

Answer 1

您可以使用函数更改 select 元素 onchange 的 class:

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>

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

希望对您有所帮助。