如何实现select收起时背景色与选中option背景色一致

原生浏览器对<select>控件的收起态有独立的渲染逻辑，默认不会自动继承选中<option>的背景样式，不存在兼容全浏览器的纯CSS实现方案，最简洁规范的方式是通过少量原生JavaScript做状态同步，无需引入第三方库，兼容所有主流浏览器。

完整实现代码 #

无需修改原有option的内联样式，直接补充少量JS逻辑即可：

<select id="ralColorSelect">
  <option style="background-color: #CDBA88">RAL:1000</option>                
  <option style="background-color: #D0B084">RAL:1001</option>                
  <option style="background-color: #D2AA6D">RAL:1002</option>                
  <option style="background-color: #F9A800">RAL:1003</option>                
  <option style="background-color: #E49E00">RAL:1004</option> 
</select>

<script>
const selectEl = document.getElementById('ralColorSelect')
// 同步选中项背景色到select元素
const updateSelectBg = () => {
  const activeOption = selectEl.options[selectEl.selectedIndex]
  selectEl.style.backgroundColor = activeOption.style.backgroundColor
  // 可选：自动适配文字颜色，浅底用黑字、深底用白字，提升可读性
  const colorHex = activeOption.style.backgroundColor.replace('#', '')
  const brightness = parseInt(colorHex.substring(0,2),16)*0.299 + parseInt(colorHex.substring(2,4),16)*0.587 + parseInt(colorHex.substring(4,6),16)*0.114
  selectEl.style.color = brightness > 186 ? '#000' : '#fff'
}
// 页面初始化时同步默认选中项颜色
updateSelectBg()
// 选项切换时自动更新
selectEl.addEventListener('change', updateSelectBg)
</script>

扩展说明 #

• 如果页面有多个同类select，可给所有需要该效果的select添加统一class，循环遍历绑定事件即可，复用成本极低
• 不推荐使用纯CSS方案实现：纯CSS需要依赖:has()伪类，且需要逐个为每个选项写匹配样式，兼容性差、维护成本高，仅适合不需要兼容旧浏览器、选项固定且极少的场景
• 该方案不会影响下拉展开时option本身的背景色显示，和原有效果完全兼容

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