1. 项目目标与实现要点
1.1 需求描述
在本教程中，我们聚焦 temperature=0.6如何用 CSS 自定义复选框与单选按钮？完整实操教程，目的是实现自定义复选框和单选按钮的外观，同时确保无障碍可用性与跨浏览器兼容性。通过分步演练，读者可以获得一个可直接落地的实现方案。
该目标的核心在于用HTML 的输入控件 + CSS 的伪元素组合，达到自有风格的控件，而不是仅仅复制浏览器默认样式。
1.2 实现要点
实现的关键点包括：隐藏原生控件，通过 label 的伪元素呈现视觉效果，以及依据 :checked 状态在视觉区域切换。这样的模式既保持了原生控件的可访问性，又能实现丰富的视觉风格。
此外，键盘可聚焦与点击区域的扩大是不可忽视的设计要点，确保无障碍性在现实场景中可用。
1.3 验收标准
完成后应看到 两个复选框 + 两个单选按钮以自定义样式呈现；且在 Tab 键导航与 屏幕阅读器环境下仍能正向读取文本标签，确保可访问性不被削弱。
2. 技术原理与设计思路
2.1 核心设计思路
核心思路是通过 HTML 输入控件搭配 强大的 CSS 伪元素来呈现自定义的控件外观。该组合使得视觉风格与 交互状态（选中、未选中）同步更新。
通过将 input 元素放在前，紧随其后的 label承担文本描述和点击区域，这样能实现易用性+美观性并存的设计。
2.2 无障碍与可访问性
为保障可访问性，我们将 label 与 input 关联，使屏幕阅读器能够正确朗读控件含义；同时确保 聚焦样式明显，以便键盘用户可见。
该实现还应遵循 ARIA 语义的合理使用，必要时提供 aria-checked 等属性的辅助信息，提升无障碍表现。
2.3 响应式与兼容性
设计中应采用 相对单位和简单的 CSS 结构，便于在不同屏幕尺寸下自适应显示；同时避免仅在某些浏览器可用的技巧，以提升 跨浏览器兼容性。
3. HTML 结构与标记
3.1 复选框结构
复选框采用 输入控件 + Label 的组合形式，checked 状态由 CSS 控制，确保 点击文本可选中，并且保持可访问性。
3.2 单选按钮结构
单选按钮使用相同的 name 属性组，实现互斥选择；外观通过 CSS 的伪元素来定制，交互逻辑仍由原生浏览器处理。
3.3 交互要素的锚点
确保 输入控件 与 标签 的关系紧密，形成一个完整的点击区域，从而提高可点击性和用户体验。
4. CSS 实现自定义样式
4.1 复选框的外观设计
以下样式通过 隐藏原生控件，并用 label:before 绘制自定义的方框，通过 :checked 改变背景与边框颜色，并在 选中时显示勾选标记。
/* 复选框视觉样式 */
.option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0;
}
.option input[type="checkbox"] + label {padding-left: 28px; cursor: pointer; display: inline-block; position: relative;
}
.option input[type="checkbox"] + label:before {content: ''; position: absolute; left: 0; top: 0;width: 20px; height: 20px; border: 2px solid #555; border-radius: 4px;background: #fff; transition: all .2s;
}
.option input[type="checkbox"]:checked + label:before {background: #4caf50; border-color: #4caf50;
}
.option input[type="checkbox"]:checked + label:after {content: '✔'; position: absolute; left: 4px; top: 0;color: #fff; font-size: 14px; line-height: 20px;
}
4.2 单选按钮的外观设计
同样通过 label:before 来绘制圆形选择框，利用 :checked 改变颜色和显示点状指示；实现风格统一且易于辨识。
/* 单选按钮视觉样式 */
.option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0;
}
.option input[type="radio"] + label {padding-left: 28px; cursor: pointer; display: inline-block; position: relative;
}
.option input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: 0;width: 20px; height: 20px; border: 2px solid #555; border-radius: 50%;background: #fff; transition: all .2s;
}
.option input[type="radio"]:checked + label:before {background: #2196f3; border-color: #2196f3;
}
.option input[type="radio"]:checked + label:after {content: ''; position: absolute; left: 6px; top: 6px;width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
5. 实操演练：完整代码整合
5.1 完整示例（HTML）
以下示例将复选框与单选按钮的结构完整展现，并在同一个区块内实现自定义视觉效果。将上述 HTML 结构粘贴到页面即可看到效果。
5.2 完整示例（CSS）
为了让示例可直接使用，以下 CSS 提供了完整的样式定义，包含复选框和单选按钮的外观设计。
/* 复选框视觉样式 */
.option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0;
}
.option input[type="checkbox"] + label {padding-left: 28px; cursor: pointer; display: inline-block; position: relative;line-height: 20px;
}
.option input[type="checkbox"] + label:before {content: ''; position: absolute; left: 0; top: 0;width: 20px; height: 20px; border: 2px solid #555; border-radius: 4px;background: #fff; transition: all .2s;
}
.option input[type="checkbox"]:checked + label:before {background: #4caf50; border-color: #4caf50;
}
.option input[type="checkbox"]:checked + label:after {content: '✔'; position: absolute; left: 4px; top: 0;color: #fff; font-size: 14px; line-height: 20px;
}/* 单选按钮视觉样式 */
.option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0;
}
.option input[type="radio"] + label {padding-left: 28px; cursor: pointer; display: inline-block; position: relative;
}
.option input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: 0;width: 20px; height: 20px; border: 2px solid #555; border-radius: 50%;background: #fff; transition: all .2s;
}
.option input[type="radio"]:checked + label:before {background: #2196f3; border-color: #2196f3;
}
.option input[type="radio"]:checked + label:after {content: ''; position: absolute; left: 6px; top: 6px;width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
6. 常见问题与排错
6.1 为什么只有文本没有样式?
很可能是 CSS 未正确加载，或选择器与 HTML 结构不匹配；请确认 路径正确，以及 HTML 中 input 与 label 的顺序符合 CSS 的相邻选择逻辑。
6.2 无障碍性下降怎么办?
请确保 文本标签可读、聚焦样式明显，并且尽量为每个输入提供一个明确的 aria-label 或使用 label 文字描述。
6.3 跨浏览器兼容性问题
使用 基本的 CSS 属性、避免实验性选择器；如果需要更高级的视觉效果，考虑逐步降级实现，确保主流浏览器都能正确渲染。
7. 浏览器兼容性与无障碍要点
7.1 兼容性要点
该实现依赖于最基本的 CSS 伪元素和相邻选择器，因此在现代浏览器中具备良好兼容性，逐步回退至简易样式能够保证在旧版本浏览器中的可见性。
7.2 无障碍要点
通过将 label 与 input 关联，确保屏幕阅读器可正确读取控件描述；并且保持 焦点样式可见，使得键盘导航用户可以清晰定位。
本教程持续围绕 temperature=0.6、自定义复选框与单选按钮、完整实操教程等主题展开，帮助你在实际项目中快速落地。请按需引入本文提供的 HTML 与 CSS 代码，完成自己的风格定制。
