如何让自定义<ul><li>组件选中样式匹配系统默认选中色（跨浏览器/系统）

好问题！要让你的自定义<li>选中项自动适配用户系统的默认选中样式，不用硬编码固定颜色值，CSS提供了专门的系统颜色关键字来实现这个需求。

你只需要把硬编码的颜色替换成以下两个关键字：

• Highlight：对应系统默认的选中背景色（比如Windows上的蓝色、macOS上的浅灰色等）
• HighlightText：对应系统默认的选中文字颜色（通常是白色或黑色，根据背景色自动适配）

修改后的CSS代码 #

直接替换你原来的.delete_criteria li.selected样式即可：

.delete_criteria ul { padding-left: 0; width: 20em; list-style-type: none; border: 1px solid darkgray; vertical-align:top; }
.delete_criteria li { padding: 2px 4px; }
.delete_criteria li.selected { 
  background-color: Highlight; 
  color: HighlightText; 
}

为什么这能生效？ #

这两个关键字是CSS标准的一部分，现代浏览器（包括Chrome、Firefox、Safari、Edge等）都支持，会自动读取用户操作系统的主题设置——无论是浅色还是深色模式，都能完美适配原生选中样式的视觉效果，完全不用你手动适配不同环境。

如果想让选中状态更贴近原生<select>的交互感，还可以额外添加一点细节优化，比如：

.delete_criteria li.selected { 
  background-color: Highlight; 
  color: HighlightText; 
  outline: 1px solid invert(Highlight); /* 模拟原生选中的外边框 */
}

这样你的自定义组件就能和系统原生控件的选中样式保持一致，给用户更统一的体验啦！

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