/* 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;
}
希望对你有帮助!!谢谢。
关于html - 单击时未选择自定义单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52213868/