我正在使用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>
发布于 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>
https://stackoverflow.com/questions/-100005646
复制相似问题