javascript - 使用 javascript 将下拉字段选择更改为 #333

Question

我有一个下拉字段，其中包含占位符文本和点击后可供选择的几个选项。最初，占位符文本是#333，可供选择的选项也是如此。我使用以下代码成功地将占位符文本更改为浅灰色:

#estimation_popup select  {
   color: #b2b7c8 !important;
}
#estimation_popup select option {
   color: #000000!important;

这是显示结果的视觉效果:

但是问题是，在选择一个选项后，颜色是浅灰色，而我希望它是#333。我明白为什么会这样，但我认为只能使用我不太擅长的 javascript 来解决这个问题。

这是一个视觉效果，显示了选择一个选项时发生的情况:

有人可以帮我将所选值更改为#333。

Answer 1

在select上使用required属性，在无效时选择它。当您将占位符选项的值设置为 ""时，您可以使用 :invalid 选择它!检查一下:

select {
  color: black;
}

select option {
  color: #333;
}

select:invalid, select option:disabled {
  color: lightgrey;
}

<select required>
    <option value="" selected disabled="disabled">Click here to select</option>
    <option value="1">Yes</option>
    <option value="2">Not yet</option>
    <option value="2">Not sure</option>
</select>