input[type="checkbox"]和radio不能直接css改外观因浏览器原子级渲染，需先用appearance: none解锁；移除后须设宽高、关联label、处理状态与无障碍。
为什么 input[type="checkbox"] 和 input[type="radio"] 不能直接用 CSS 改外观
因为浏览器对这些表单控件的渲染是“原子级”的——appearance: none 才是解锁自定义的第一步，但不是万能钥匙。不加这句，后续所有 background、border 都可能被忽略，尤其在 Safari 和旧版 Edge 中。
实操建议：
- 必须写
input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; }，-webkit-前缀在 Safari 和 Chrome 里仍必要 - 移除默认样式后，控件会塌缩成一个看不见的点，立刻补上
width和height（比如18px），否则点击区域消失 - 别依赖
::before/::after直接作用在input上——它不支持伪元素。得用相邻兄弟选择器搭配label
怎么让自定义勾选框响应真实状态（:checked、:disabled）
核心是把 input 和 label 绑死：要么用 for + id，要么把 input 包进 label。否则 :checked 状态切换了，你画的“对勾”纹丝不动。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 点了 label，视觉没变 →
input和label没关联，或input被display: none后失去焦点能力 - 禁用状态（
disabled）下仍能点击 → 忘了给自定义容器加pointer-events: none或同步设置opacity和cursor - 键盘无法空格切换 →
input必须可聚焦（没加tabindex且没被display: none彻底隐藏）
推荐结构：
<label class="custom-radio"> <input type="radio" name="theme" value="dark"> <span class="custom-control"></span> 深色模式 </label>然后用
input:checked + .custom-control 控制样式。
accent-color 是什么？能替代手写样式吗
accent-color 是 CSS 新增属性，只控制原生控件的高亮色（比如复选框打钩颜色、滑块小圆点），不改变形状、大小或背景。它轻量、可继承、支持动画，但兼容性有限（Chrome 93+、Firefox 92+、Safari 15.4+）。
使用场景：
- 快速统一品牌色，又不想维护一整套自定义逻辑时，可作为降级方案
- 配合
appearance: none一起用反而危险：某些浏览器（如旧 Safari）会忽略accent-color，导致完全没高亮 - 不能解决「圆角」「阴影」「图标替换」等需求，该画的
::before还得画
示例：input[type="checkbox"] { accent-color: #4f46e5; } —— 仅生效于支持它的环境，其他地方还是默认灰。
无障碍（a11y）最容易被忽略的三个细节
视觉改得再漂亮，如果屏幕阅读器读不出状态、键盘操作断连、焦点不可见，就等于没做。
- 必须保留
input的name和value，否则表单提交时拿不到值；用aria-label或label文本说明用途，别只靠图标 -
focus样式不能只靠outline—— 很多人用outline: none清掉再不补，结果键盘用户找不到当前焦点。至少加box-shadow: 0 0 0 2px #3b82f6 - 自定义勾选动画（比如旋转对勾）别用
transform: scale(0)隐藏，要用visibility: hidden或opacity: 0，否则屏幕阅读器可能跳过该元素
复杂点在于：既要藏掉原生控件，又不能让它在可访问性树中“消失”。最稳做法是保留 input 在 DOM 中、不设 display: none，用 position: absolute; clip-path: inset(50%) 移出视口。
