是否可以仅使用css更改选择的空白颜色?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)
<select>
  <option disabled selected>=select=</option>
  <option>1</option>
</select>

当用户看到“=select=”时,我希望颜色是灰色的。

当选择“1”时,颜色是黑色的。就像这张照片(https://i.stack.imgur.com/9hcm9.png)

select { color: black; }

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

是否可以仅用CSS更改颜色?谢谢

提问于
用户回答回答于

你可以使用一个函数来更改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>

注意,我还使用了classoption元素。但这不是强制性的。

希望能帮上忙。

用户回答回答于

你可以像下面这样更改SELECT的颜色

select {
        color:grey;
        border: 1px solid #ddd;
        width: 140px;
        height: 25px;
}
<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

扫码关注云+社区

领取腾讯云代金券