如何为选中的单选按钮及其关联标签统一添加边框样式

通过 css 的 :has() 伪类可实现对包含已勾选 radio 的父容器整体加边框，同时配合 + 邻居选择器优化标签样式，兼容现代浏览器（chrome 105+、safari 15.4+、firefox 121+），并提供降级方案确保基础功能可用。

在表单交互设计中，常需突出显示用户已选中的单选按钮（radio）及其对应标签，以增强视觉反馈与可访问性。由于 本身无法直接设置宽高或边框（原生控件渲染受限），且其与 是兄弟关系而非父子嵌套，因此不能简单用 .form-check:checked（该写法无效：.form-check 元素自身无 :checked 状态）或 ::after 伪元素（::after 作用于 .form-check 时无法感知内部 input 状态）来实现目标。

✅ 正确解法是利用 css :has() 关系选择器，从父容器 .form-check 出发，检测其子级 radio 是否被选中：

.form-check:has(> input[type="radio"]:checked) {   display: inline-flex;   align-items: center;   padding: 8px 16px;   border: 2px solid #dc3545;   border-radius: 8px;   background-color: #fff9f9; }

该规则表示：当 .form-check 内部存在一个直接子元素 且处于 :checked 状态时，为其整体添加红色边框与圆角背景。注意使用 > input[type=”radio”] 可提升选择器特异性与语义准确性。

⚠️ 注意事项：

• :has() 尚未在所有旧版浏览器中支持（如 Chrome
• 基础层：始终为 .form-check 设置 cursor: pointer 和轻微 hover 效果，保障交互提示；
• 增强层：用 @supports (selector(:has(*))) { … } 包裹 :has() 样式，避免不支持时解析错误；

完整可用示例（含 html + CSS）：

      No 
 
      Yes 

/* 基础交互优化 */ .form-check {   cursor: pointer;   transition: all 0.2s ease; }  /* 现代浏览器增强：统一高亮选中项 */ @supports (selector(:has(*))) {   .form-check:has(> input[type="radio"]:checked) {     display: inline-flex;     align-items: center;     padding: 8px 16px;     border: 2px solid #dc3545;     border-radius: 8px;     background-color: #fff9f9;   }    /* 微调 label 间距，避免文字紧贴边框 */   .form-check input[type="radio"]:checked + label {     margin-left: 8px;   } }  /* 可选：为无障碍体验增加 focus-outline */ .form-check input:focus-visible + label {   outline: 2px solid #007bff;   outline-offset: 2px; }

总结：统一高亮 radio 与其 label 的核心在于「状态感知上移」——将样式逻辑放在共同父容器上，并借助 :has() 建立父子状态关联。这是现代 CSS 解决表单状态联动的优雅范式，既语义清晰，又无需 javaScript 干预，推荐在支持环境中优先采用。