如何修改下拉列表中已选中选项的背景色？Bootstrap4下CSS定位选中option的方法

原生HTML的<select>组件样式受浏览器、操作系统渲染规则限制，纯CSS对<option>的自定义能力有限，但完全可以通过原生选择器精准定位选中态选项，结合Bootstrap4的样式规则覆盖实现自定义背景色

核心定位方法 #

很多人写样式时会尝试用option:selected这类不存在的选择器定位选中项，实际上不需要手动遍历option判断选中状态加类，直接用CSS原生的:checked伪类，就能100%精准匹配当前被选中的<option>元素，比JS判断更高效可靠：

/* 覆盖选中option的背景色，适配Bootstrap4表单的样式优先级 */
#time-select option:checked {
  /* 替换为你需要的浅蓝色色值 */
  background-color: #e3f2fd !important;
  /* 匹配Bootstrap4默认文本色，避免选中后对比度异常 */
  color: #212529;
}

常见兼容性注意事项 #

• Windows平台下的Chrome、Edge浏览器会强制给选中option加系统默认高亮背景，这种场景需要在属性值后加!important，才能覆盖浏览器的默认UA样式
• macOS平台的Safari浏览器对option的自定义背景支持度较差，仅能修改选中项的文字颜色，无法自定义背景，这是系统原生渲染的限制，无法通过纯CSS突破
• 如果需要跨平台完全统一的下拉框样式，不建议硬改原生select的option样式，可以改用Bootstrap4自带的下拉菜单组件模拟select交互，实现完全可控的样式，只是需要额外编写JS处理选中值的同步逻辑
• 你现有代码中给每个option加的fb-select-option类可以保留做样式扩展，不需要额外写JS判断选中态，:checked伪类已经能完成全部定位逻辑

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