label点击无默认高亮，所谓高亮实为关联控件状态反馈或焦点outline；可靠方案是input前置+:checked+label选择器配合display:none隐藏原生控件。
label点击时的默认高亮行为不可控
浏览器对 label 元素本身没有内置的“点击高亮”样式（比如像按钮那样的 :active 蓝色背景或阴影），你看到的所谓“高亮”，通常是以下两种情况之一：复选框/单选框状态变化后的 CSS 反馈，或者 label 内部 input 获得焦点时的 outline。这两者都不是 label 自身被点击时的视觉反馈，而是关联控件的状态映射或浏览器默认焦点样式。
想让 label 点击后“看起来被选中”，得靠 :checked + label 配合结构调整
这是实现持久高亮最干净、无需 JS 的方案，但只适用于 input[type="radio"] 或 input[type="checkbox"] 场景。关键不是给 label 加 :active，而是利用控件选中状态反向影响 label 样式：
- HTML 中必须把
input放在label之前（不能嵌套，也不能 for 关联在后） - CSS 使用
input:checked + label或input:checked + .your-label-class触发样式 - 务必隐藏原生控件（
display: none），否则会同时显示原生框和自定义样式 - 如果 label 是块级容器（如卡片），记得加
cursor: pointer明确提示可交互
示例结构：
<input type="radio" name="theme" id="dark"><label class="theme-option" for="dark">深色模式</label>
CSS：
input[type="radio"] { display: none; }
input[type="radio"]:checked + .theme-option {
background-color: #2563eb;
color: white;
}
label 自身的 :active 伪类能用，但有严重限制
你可以直接写 label:active { background-color: #e2e8f0; }，但它只在鼠标按下、手指按住的瞬间生效，松开就消失——无法“记住”选中状态。更麻烦的是：
- 移动端上，
:active常因 300ms 延迟或 touch-action 设置而失效 - 键盘用户按
Space或Enter触发 checkbox/radio 时，:active不触发 - 如果 label 里有子元素（如
<i></i>图标），点击子元素时部分浏览器可能不触发 label 的:active - 它和
:focus无关，不会随控件焦点自动同步
真正可靠的高亮 = 控件状态 + label 结构 + CSS 选择器组合
别试图单独“高亮 label”，要把它当作表单控件状态的视觉延伸。容易被忽略的点是：label 的语义位置决定了你能用哪种 CSS 选择器。嵌套写法（<label><input>...</label>）无法用 :checked + label，只能靠 JS 切 class 或改用 label input:checked ~ span 这类间接方式，反而增加复杂度。显式前置 + 相邻选择器是最小依赖、最大兼容的路径。另外，所有高亮样式必须配合 pointer-events: auto 和未被遮挡的渲染盒——哪怕加了 opacity: 0.99 都可能意外阻断事件穿透。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
