/* radio buttons */
.radio-container {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 1.5em;
margin-bottom: 0.75em;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked .radio:after {
display: block;
}
.radio-container:hover .radio {
background: gray;
}
/* custom radio button */
.radio {
position: absolute;
top: 0;
left: 0;
height: 1em;
width: 1em;
background-color: transparent;
border: 1px solid gray;
border-radius: 50%;
}
.radio:after {
content: "";
position: absolute;
display: none;
top: 0;
left: 0;
width: 0.25em;
height: 0.25em;
border-radius: 50%;
background: white;
}
<form class="recharge">
<div>
<label class="radio-container" for="subscribe">
<input type="radio" id="one-time" name="recharge">
<span class="radio"></span>
Subscribe & Save 10%
</label>
</div>
<div>
<label class="radio-container" for="one-time">
<input type="radio" id="one-time" name="recharge">
<span class="radio"></span>
One Time Purchase
</label>
</div>
</form>我在网站上的单选按钮中添加了自定义样式，以为它们提供自定义样式。我的HTML和CSS代码附在上面的代码片段中。但是，现在当我单击输入时，它不会被选择。理想情况下，我希望在没有JS组件的情况下也能正常工作。
请找到您问题的解决方案：
我发现的问题之一是，单击单选按钮后还没有指定颜色，并且同级选择器也丢失了。我专门添加了以下几行：
.radio-container input:checked ~ .radio {
background-color: #2196F3;
}
希望能帮助到你！！谢谢。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句