通过 css 选择器精准定位已选中的 radio 输入项，并利用 `:has()` 或相邻兄弟选择器联动其父容器与 label，实现按钮和标签整体高亮边框效果。需注意浏览器兼容性及 dom 结构约束。
在表单交互设计中，常需对用户已选中的单选按钮（<input type="radio">）及其对应 <label> 进行统一视觉强化，例如添加红色边框、圆角和内边距，以提升可访问性与用户体验。但因 <input> 元素本身不可直接设置宽高或伪元素（如 ::before/::after），且原生 radio 按钮默认不响应 :checked 的父级样式继承，因此需借助 CSS 逻辑组合实现。
✅ 推荐方案：使用 :has() 选择器（现代浏览器）
若目标环境支持 CSS :has()（Chrome 105+、Edge 105+、Safari 15.4+），最简洁可靠的方式是基于父容器状态响应子元素变化：
.form-check:has(> input[type="radio"]:checked) {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border: 2px solid #e74c3c;
border-radius: 30px;
background-color: #fff9f9;
}该规则表示：当 .form-check 内部存在一个被选中的 radio 输入时，整个容器即应用边框与圆角样式——自然覆盖了按钮与 label 的整体区域。
⚠️ 注意：#first_question:checked:after 的写法无效，因为 <input> 不支持 ::after 伪元素；上例中该代码实际未生效，属于常见误区，应避免。
✅ 兼容方案：使用相邻兄弟选择器（全浏览器支持）
对于需兼容旧版浏览器（如 Firefox < 121、IE）的项目，可改用 input:checked + label 配合额外包装结构或 JS 辅助，但纯 CSS 下更稳妥的做法是：
- 保持 HTML 结构不变（input 在 label 前）；
- 对 input:checked 设置 position: relative 并用伪元素模拟“高亮层”；
- 同时为 input:checked + label 添加左侧间距与颜色强化，形成视觉联动。
示例（无 JS，兼容 IE9+）：
.form-check {
position: relative;
padding-left: 40px; /* 为 radio 留出空间 */
}
.form-check input[type="radio"] {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.form-check input[type="radio"]:checked + label {
color: #e74c3c;
font-weight: 600;
padding-left: 8px;
}
/* 可选：为 label 添加左侧边框模拟整体感 */
.form-check input[type="radio"]:checked + label::before {
content: '';
position: absolute;
left: -2px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #e74c3c;
border-radius: 50%;
background: white;
}? 总结与建议
- 首选 :has()：语义清晰、维护性强，适用于现代项目（建议配合 @supports 降级）；
- 慎用 ::after 于 <input>：原生表单控件不支持伪元素，所有类似尝试均无效；
- 结构即样式基础：确保 input 与 label 同级且 for/id 正确绑定，否则 + 选择器失效；
-
无障碍友好：添加 focus-visible 样式支持键盘导航，例如：
.form-check:focus-within { outline: 2px solid #3498db; outline-offset: 2px; }
最终效果：用户点击后，整个 .form-check 区域（含 radio 和 label 文本）呈现统一红色圆角边框，清晰传达当前选中状态。
