原生 checkbox 无法用 background-color 等常规属性修改，因其样式由浏览器 UA 强锁定；唯一稳定可访问方案是隐藏原生控件（position: absolute + opacity: 0 + pointer-events: none），再通过 label 与伪元素重绘，并确保 focus、键盘操作及屏幕阅读器支持。
原生 的样式无法用 background-color、border 等常规属性直接修改——不是你写错了，是浏览器根本不响应。唯一稳定、可访问、跨浏览器可行的方案，就是隐藏它，再用 label 和伪元素重画。
为什么直接改 input[type="checkbox"] 样式没用
Chrome、Firefox、Safari 对原生 checkbox 的 UA 样式做了强锁定：background-color 在未选中态基本无效，width/height 可能被忽略，border-radius 在部分版本里只影响 :checked 态。试图靠 appearance: none 单独清样式也不保险：Safari 有时仍留白边，IE/Edge 需额外处理 ::-ms-check，且清完后若不补交互层，控件就“点不动”了。
常见错误现象：
-
input[type="checkbox"] { background: red; }—— 页面毫无变化 - 加了
transform: scale(1.5)后文字模糊、对齐错位 - 用
display: none隐藏后，屏幕阅读器读不到，键盘Tab也跳过
正确隐藏原生 checkbox 的三要素
必须同时满足以下三点，才能既保留功能又释放样式控制权：
- 用
position: absolute移出渲染流（比opacity: 0更稳妥，避免 Safari 点击穿透） - 保留
width: 0; height: 0;或显式设为0，防止占位干扰布局 - **不能**用
display: none或visibility: hidden，否则破坏可访问性（ARIA 不识别、Tab键失效）
推荐写法：
.custom-checkbox input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
用 label + ::before 构建可点击视觉层
关键在于结构绑定和选择器联动。HTML 必须让 input 和 label 形成有效关联：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 要么用
- 要么用包裹结构：
（更简洁，推荐）
CSS 中通过兄弟选择器 + 控制状态切换：
.custom-checkbox input:checked + .checkmark {
background-color: #0A8276;
}
.custom-checkbox input:checked + .checkmark::after {
opacity: 1;
}
注意：::before 或 ::after 必须设 content: '' 才能渲染；若父容器是 inline（如默认 label），IE11 下伪元素宽高可能失效，建议显式设 display: inline-block。
容易被忽略的可访问性细节
很多实现漏掉这几点，导致键盘用户或屏幕阅读器无法正常使用：
- 没给
label加cursor: pointer和user-select: none，用户会误以为不可点 - 没处理
:focus态（比如加outline），键盘 Tab 导航时失去焦点提示 - 伪元素对勾用
border绘制时，粗细在高分屏下可能发虚，建议用 SVG data URI 或mask-image替代 - 移动端点击区域太小，需确保
.checkmark宽高 ≥ 44×44px（iOS 最小触控尺寸）
真正难的不是画个方框，而是让那个方框在任何设备、任何辅助技术下，都和原生 checkbox 行为一致——点它就选，空格键就切，读屏器能报“已选中”，焦点移动时不跳过。这些细节不补全，美化就只是视觉糖衣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
