根据选项颜色更改选择文本颜色

【问题标题】：Change the select text color based on option color根据选项颜色更改选择文本颜色
【发布时间】：2023-01-12 22:15:20
【问题描述】：

我想以与选项本身相同的颜色显示所选选项。

<select>
  <option value="1" style="color:blue">Blue</option>
  <option value="2" style="color:red">Red</option>
</select>

选项以蓝色和红色正确显示，但一旦选择，它们就会变成黑色。是否可以将其显示为蓝色或红色，以匹配所选选项？

PD：我知道如何在 JS 中完成，但我不确定是否可以在 CSS 中完成

【问题讨论】：

标签： css

【解决方案1】：

Idk 如果你考虑这个 js，但是如果 select 有 onchange 它可以修改 dataset 等于 value。然后css可以反映出来。

.blue,select[data-chosen='1']{
  color:blue;
}
.red,select[data-chosen='2']{
  color:red;
}

<select onchange="this.dataset.chosen = this.value;" data-chosen="1">
  <option value="1" class="blue">Blue</option>
  <option value="2" class="red">Red</option>
</select>

【讨论】：

【解决方案2】：

仅使用 CSS 是不可能的，您需要 CSS 和 JS 的组合。 CSS 的本质是向下级联，而不是向上级联，当子元素（选项）发生某些事情时，我们不能影响父元素（这里的选择字段）。

【讨论】：