CSS自定义RadioButton无法正常工作？
CSS自定义RadioButton无法正常工作？
提问于 2018-07-23 09:47:11
我正在使用CSS制作一个简单的自定义单选按钮，我不知道为什么不像普通的单选按钮那样工作。当我选择一个时，另一个也选择了自己（？）
/* Radio Button */
.radioBtn{
float: right;
margin-top: 30px;
height: 35px;
width: 35px;
border: solid 3px #d8aa00;
border-radius: 50%;
background: #fffbd8;
position: relative;
transition: .3s;
}
.radioBtn::after{
position: absolute;
width: 20px;
height: 20px;
background: #d8aa00;
border-radius: 50%;
content: '';
top: 7px;
left: 7px;
opacity: 0;
transition: .3s;
}
input[type=radio]:checked ~ .radioBtn::after {
opacity: 1;
}
input[type=radio]{
display: none;
}<input id="radioBtn" type="radio" name="test">
<label class="radioBtn" for="radioBtn"></label>
<input id="radioBtn2" type="radio" name="test">
<label class="radioBtn" for="radioBtn2"></label>
回答 1
Stack Overflow用户
发布于 2018-07-23 19:23:56
使用+而不是~目标只有眼前的兄弟放置后，而不是所有的人。
+组合子选择相邻的兄弟姐妹。这意味着第二个 元素直接跟在第一个元素之后，并且它们共享同一个父元素。参考文献（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators）
〜组合子选择兄弟姐妹。这意味着，第二元件跟随第一（尽管不一定是立即），和二者共享相同的父 参考文献（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators）
/* Radio Button */
.radioBtn{
float: right;
margin-top: 30px;
height: 35px;
width: 35px;
border: solid 3px #d8aa00;
border-radius: 50%;
background: #fffbd8;
position: relative;
transition: .3s;
}
.radioBtn::after{
position: absolute;
width: 20px;
height: 20px;
background: #d8aa00;
border-radius: 50%;
content: '';
top: 7px;
left: 7px;
opacity: 0;
transition: .3s;
}
input[type=radio]:checked + .radioBtn::after {
opacity: 1;
}
input[type=radio]{
display: none;
}<input id="radioBtn" type="radio" name="test">
<label class="radioBtn" for="radioBtn"></label>
<input id="radioBtn2" type="radio" name="test">
<label class="radioBtn" for="radioBtn2"></label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005646
复制相关文章
相似问题