如何通过CSS根据选中选项更新<select>元素的颜色？

核心思路 #

监听的change事件，每次选中选项变化时，获取该的实际显示颜色，然后把这个颜色赋值给本身的文字颜色。另外页面加载时要初始化一次，确保默认选中的选项颜色也能同步。

完整代码示例 #

HTML

<select id="colorSelect">
  <option id="default" style="color: red;">默认红色选项</option>
  <option style="color: green;">绿色选项</option>
  <option style="color: blue;">蓝色选项</option>
</select>

CSS（可选，优化显示效果）

select {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* 去掉默认的下拉箭头样式（可选） */
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
}

JavaScript

const colorSelect = document.getElementById('colorSelect');

// 封装更新颜色的函数
function syncSelectColor() {
  // 获取当前选中的option元素
  const selectedOption = colorSelect.options[colorSelect.selectedIndex];
  // 拿到option的最终计算颜色（不管是内联样式还是CSS类设置的都能获取）
  const optionColor = window.getComputedStyle(selectedOption).color;
  // 把颜色赋值给select
  colorSelect.style.color = optionColor;
}

// 页面加载时先执行一次，同步默认选项的颜色
syncSelectColor();

// 监听select的change事件，每次选中变化时更新颜色
colorSelect.addEventListener('change', syncSelectColor);

扩展：用CSS类设置option颜色的情况 #

如果你是通过CSS类来定义颜色的（更符合代码规范），这个方案同样适用，不需要修改JavaScript代码：

修改后的CSS

.option-red { color: crimson; }
.option-green { color: forestgreen; }
.option-blue { color: dodgerblue; }

修改后的HTML

<select id="colorSelect">
  <option id="default" class="option-red">默认红色选项</option>
  <option class="option-green">绿色选项</option>
  <option class="option-blue">蓝色选项</option>
</select>

JavaScript部分完全不用改，window.getComputedStyle会自动读取的最终显示颜色，完美同步到上。 这个方法的好处是兼容性极强，所有现代浏览器甚至部分旧版浏览器都支持，而且逻辑简单，不会引入额外的复杂度。 内容的提问来源于stack exchange，提问作者Lovethenakedgun