CSS自定义RadioButton无法正常工作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (75)

我正在使用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>

提问于
用户回答回答于

使用+而不是~目标只有眼前的兄弟放置后,而不是所有的人。

+组合子选择相邻的兄弟姐妹。这意味着第二个 元素直接跟在第一个元素之后,并且它们共享同一个父元素。参考文献(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>

扫码关注云+社区

领取腾讯云代金券