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

izj3ouym 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(128)

超文本标记语言：

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

型
但都不管用有朋友能帮忙吗？

Html

来源：https://stackoverflow.com/questions/76766387/how-to-add-same-border-to-both-input-radio-button-and-its-label-after-radio-has

1条答案

按热度按时间

j13ufse21#

似乎: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;
}

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

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

1条答案

相关问题

热门标签

最新问答