通过 css `:has()` 选择器可精准定位包含已勾选 radio 的父容器，从而为整个 `.form-check` 区域添加边框；配合伪元素优化按钮视觉表现，并利用兄弟选择器微调标签间距，实现按钮与标签一体化高亮效果。
在表单交互设计中，常需对用户已选中的单选按钮（）及其关联标签（
✅ 推荐方案：使用 :has() 选择器（现代浏览器支持）
CSS :has() 是一个父选择器，允许我们根据子元素状态反向选中其祖先元素。这是实现本需求最简洁、语义最清晰的方式：
.form-check:has(> input[type="radio"]:checked) {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border: 2px solid #dc3545;
border-radius: 8px;
background-color: #fff9f9;
}
✅ 优点：
- 精准作用于 .form-check 容器，自然包裹 radio 和 label；
- 无需 JavaScript，纯 CSS 响应式控制；
- 保持 HTML 结构干净（label 仍为 for 关联，无障碍友好）。
⚠️ 注意：:has() 已被 Chrome 105+、Firefox 103+、Safari 15.4+ 原生支持（Can I use :has()）。若需兼容旧版 IE 或较老浏览器，需降级方案（见文末补充）。
✨ 进阶优化：自定义 radio 按钮 + 标签对齐
为提升视觉一致性，可隐藏原生 radio 并用伪元素重绘，同时确保 label 与自定义控件对齐：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
/* 隐藏原生 radio */
.form-check input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 自定义 radio 圆点（未选中） */
.form-check input[type="radio"] + label::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #6c757d;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
/* 选中时的圆点填充 */
.form-check input[type="radio"]:checked + label::before {
background-color: #dc3545;
border-color: #dc3545;
}
/* 选中时 label 文字加粗 & 微调间距 */
.form-check input[type="radio"]:checked + label {
font-weight: 600;
color: #212529;
}
配合 HTML（保持 for/id 关联）：
<div class="form-check fs-3 mb-3"> <input id="first_question" name="first_question" type="radio" value="n"><label for="first_question">No</label> </div>
? 注意事项与兼容性建议
- 无障碍保障：务必保留 id 与 for 属性配对，确保屏幕阅读器能正确关联控件与标签；
- 移动端点击区域：.form-check 添加 padding 后，天然扩大了可点击区域，提升触控体验；
-
旧浏览器降级方案：如需支持 Safari document.querySelectorAll('input[type="radio"]').forEach(radio => {
radio.addEventListener('change', () => {
// 移除其他同组 radio 的高亮
document.querySelectorAll(`input[name="${radio.name}"]`)
.forEach(r => r.closest('.form-check')?.classList.toggle('checked', r.checked));
});
});
对应 CSS：
.form-check.checked { border: 2px solid #dc3545; border-radius: 8px; }
综上，借助现代 CSS 的 :has() 能力，我们能以声明式、轻量、可维护的方式，优雅地实现“单选按钮与其标签整体高亮”的交互效果，兼顾语义、可访问性与开发效率。
