如何根据选项颜色修改select选中文本的颜色？

先给你说结论：纯CSS做不到这个需求，因为浏览器原生的<select>组件样式被封装得很死，选中后的文本颜色是继承自<select>本身的，CSS没办法直接把选中<option>的颜色同步到<select>上。

不过有两种可行的解决办法：

1. JavaScript实现（最靠谱，保留原生组件） #

监听下拉框的选择事件，把选中选项的颜色直接赋值给<select>元素就行，初始化的时候也要设置一次默认选中项的颜色：

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

<script>
const select = document.getElementById('colorSelect');
// 页面加载时先设置默认选中项的颜色
select.style.color = select.options[select.selectedIndex].style.color;
// 选框变化时更新颜色
select.addEventListener('change', function() {
  this.style.color = this.options[this.selectedIndex].style.color;
});
</script>

2. 模拟下拉框（CSS+少量JS，完全自定义样式） #

如果不想依赖太多JS，可以用普通HTML元素模拟原生下拉框，这样样式想怎么改都行，但要自己处理选择逻辑：

<div class="custom-select">
  <div class="selected-item" style="color:blue">Blue</div>
  <div class="option-list">
    <div class="option" data-val="1" style="color:blue">Blue</div>
    <div class="option" data-val="2" style="color:red">Red</div>
  </div>
</div>

<style>
.custom-select {
  position: relative;
  width: 160px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.selected-item {
  padding: 8px 12px;
  cursor: pointer;
}
.option-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
}
.option {
  padding: 8px 12px;
  cursor: pointer;
}
.custom-select:hover .option-list {
  display: block;
}
.option:hover {
  background-color: #f5f5f5;
}
</style>

<script>
// 处理选项点击逻辑
document.querySelectorAll('.option').forEach(opt => {
  opt.addEventListener('click', function() {
    const selected = document.querySelector('.selected-item');
    selected.textContent = this.textContent;
    selected.style.color = this.style.color;
    document.querySelector('.option-list').style.display = 'none';
  });
});
</script>

注意：模拟的下拉框没有原生组件的键盘导航、焦点管理等无障碍特性，如果是做面向大众的产品，优先推荐第一种JS方案。

内容的提问来源于stack exchange，提问作者joseantgv