css checkbox radio 选择器技巧_自定义表单样式方案

• input:checked + label：仅匹配紧邻的下一个兄弟 label
• input:checked ~ .custom-icon：匹配其后所有同级的 .custom-icon，更灵活
• 若 input 在 label 内部（推荐写法），则无需依赖 +/~，直接用 label > input:checked + span 等结构

隐藏原生控件并用 ::before/::after 重绘外观

最稳定的做法是将原生 input 视觉隐藏（不设 display: none，否则失去可访问性和表单提交能力），再用伪元素绘制自定义样式。

• 隐藏原生控件：

  input[type="checkbox"], input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; }

• 为关联的 label 添加自定义容器：

  label .custom-control { position: relative; padding-left: 30px; }

• 用 ::before 绘制外框，::after 绘制选中态（如对勾、圆点）：

  label .custom-control::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #999; border-radius: 4px; }

  input:checked + .custom-control::after { content: "✓"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 12px; }

处理 focus / indeterminate 状态提升可用性

仅支持 :checked 不够——键盘用户需要 :focus 样式，三态 checkbox 还需识别 :indeterminate（javaScript 设置 input.indeterminate = true 后生效）。

• input:focus + .custom-control::before 应添加轮廓（outline）或阴影，确保焦点可见
• input:indeterminate + .custom-control::after 可设置短横线或中间圆点：

  input:indeterminate + .custom-control::after { content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: currentColor; border-radius: 50%; }

• 避免用 box-shadow 模拟 focus ring，部分屏幕阅读器不识别；优先用 outline 并配合 outline-offset

兼容性与可访问性必须检查的三项

自定义样式极易破坏语义和交互逻辑，上线前务必验证：

立即学习“前端免费学习笔记（深入）”；

• label 必须正确绑定 for 属性或包裹 input，否则点击文字无法触发选中
• 用屏幕阅读器（如 NVDA + firefox）测试是否能读出“复选框 已选中”等状态，aria-checked 一般不需要手动加——浏览器会自动同步原生 input 的状态
• 移动端 safari 对 :checked + * 支持良好，但旧版 android webview 有延迟渲染问题，可加 transform: translateZ(0) 强制硬件加速

真正难的不是画一个好看的勾，而是让那个勾在键盘导航、高对比度模式、语音指令下都准确响应。样式可以重写，语义断了就很难补救。