javascript - 检查单选后如何为输入单选按钮及其标签添加相同的边框？

Question

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>

选中单选后如何为输入单选按钮及其标签添加相同的边框？

我都尝试过:

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

和:

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

但是他们都不起作用。有 friend 可以帮忙吗？

Answer 1

似乎 :has() 选择器在许多浏览器中不起作用。这是codepen demo在不同的浏览器中尝试一下。

.form-check:has(> #first_question:checked){
  display: inline-flex;
  padding: 10px 50px;
  border: 2px solid red;
  border-radius: 30px;
}

#first_question:checked:after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 5px solid red;
    border-radius: 50%;
    top: -4px;
    left: -4px;
    position: relative;
    background-color: white;    
}

#first_question:checked + label{
  margin-left: 5px;
}

<div class="form-check fs-3 mb-3">
  <input id="first_question" name="first_question" type="radio" value="n">
  <label for="first_question">Excellent</label>
</div>