如何在单选按钮被选中后为其与对应标签添加统一边框？

现有HTML结构 #

<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>

需求 #

单选按钮被选中后，为该按钮及其对应的标签添加相同的红色边框。

尝试过的无效CSS #

第一种写法：

.form-check:checked{
border:2px solid red;
border-radius: 4px;
color:red;
}

第二种写法：

.form-check::after{
border:2px solid red;
border-radius: 4px;
color:red;
}

解决方案 #

方法一：直接控制单选按钮和标签 #

/* 重置原生单选按钮样式并设置选中状态边框 */
.form-check input[type="radio"]:checked {
  appearance: none; /* 清除浏览器默认样式 */
  width: 20px;
  height: 20px;
  border: 2px solid red;
  border-radius: 50%; /* 保持单选按钮圆形外观 */
  outline: none;
  background-color: #fff;
}

/* 选中状态下的对应标签添加边框 */
.form-check input[type="radio"]:checked + label {
  border: 2px solid red;
  border-radius: 4px;
  padding: 2px 6px; /* 避免文字紧贴边框 */
}

方法二：通过父元素控制（需浏览器支持:has伪类） #

如果希望给整个包含块加边框，同时给标签单独设置样式，可以用:has伪类：

/* 当子单选按钮选中时，给父容器加边框 */
.form-check:has(input[type="radio"]:checked) {
  border: 2px solid red;
  border-radius: 4px;
  padding: 8px;
}

/* 同时给标签加边框 */
.form-check:has(input[type="radio"]:checked) label {
  border: 2px solid red;
  border-radius: 4px;
  padding: 2px 6px;
}

错误原因说明 #

1. .form-check:checked无效：:checked伪类仅适用于表单控件（如input、checkbox等），div元素没有该状态，所以无法触发样式。
2. .form-check::after无效：这个写法是给div添加一个伪元素，和单选按钮的选中状态没有关联，自然不会在选中时显示边框。

内容的提问来源于stack exchange，提问作者William