在表单开发中，如何运用 CSS 技术来打造既美观又实用的自定义复选框与单选按钮？请阐述其实现思路与关键技巧。

回答思路

1. 【回答框架 1】实现自定义复选框和单选按钮的核心思路是隐藏原生控件，并利用 CSS 伪元素（如 ::before 和 ::after）或兄弟选择器来绘制自定义外观。具体做法是先将 input 元素的 opacity 设为 0 或使用 clip-path 等方式在视觉上隐藏，但仍保留其在文档流中的位置和可访问性。然后通过相邻兄弟选择器（如 input + label）来关联样式。
2. 【回答框架 2】对于复选框，可以利用 label 元素将文本与 input 绑定，然后通过 input:checked + label 的伪元素来呈现选中状态，例如改变背景色、边框颜色并显示一个对勾图标。对于单选按钮，实现方式类似，但自定义外观通常是圆形，选中时填充圆点。图标可以通过 CSS 绘制或使用 Unicode 字符、SVG 背景图等方式实现。
3. 【回答框架 3】在美化过程中，需要考虑不同状态的样式，包括默认、悬停、聚焦、选中和禁用等。使用 :hover 和 :focus 伪类增强交互反馈，:focus 样式还应配合 :focus-visible 以兼顾键盘导航的可访问性。对于禁用状态，应降低视觉对比度并阻止点击事件。
4. 【回答框架 4】为了提升用户体验，可以增加过渡动画（transition）使状态切换更平滑。同时，要注意不同浏览器对伪元素和选择器的支持差异，必要时添加前缀或回退方案。此外，自定义控件应保持足够的点击区域（如 label 设置 padding），并确保与原生控件在键盘操作（如 Tab 键聚焦、空格键切换）上行为一致。
5. 【回答框架 5】从可访问性角度，隐藏原生控件后仍需保证屏幕阅读器能正确识别，通常依靠 label 的 for 属性或包裹结构。同时，控件应提供清晰的焦点指示，避免仅依赖颜色传达状态。整体实现应确保在不支持 CSS 的环境下，表单控件仍能正常使用。
6. 【关键点 1】通过隐藏原生控件并利用伪元素和兄弟选择器自定义外观，是核心实现方法。
7. 【关键点 2】需关注 :checked、:hover、:focus 和禁用状态的样式，并支持键盘操作。
8. 【关键点 3】使用 label 关联控件可保证可访问性，同时考虑 :focus-visible 为键盘用户提供焦点指示。
9. 【关键点 4】合理运用 transition 增强交互体验，并注意浏览器兼容性。
10. 【关键点 5】在样式简单时可考虑 accent-color，复杂场景推荐伪元素方案