html - 自定义单选按钮未在单击时选择
问题描述
/* 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;
}
希望能帮助到你!!谢谢。
推荐阅读
- python - 杂项统计数据的网络抓取 NBA 参考
- c# - 如何演示excel鼠标移动?
- javascript - TestCafe:.navigateTo 方法访问的 URL 长度是否有限制?
- excel - 如果两个值之间的函数是否有更聪明的方式 VBA Excel 宏?
- java - 采用文本形式的锚链接并将其存储在列表中
- javascript - Powerbi在javascriptfile中嵌入设置是否有效?
- oracle - Ora-00257 归档程序错误。仅连接内部。直到被释放
- php - 生成一个随机字符串,每 24 小时刷新一次?
- c# - c# .Net Worker 服务中的测试用例方法
- javascript - 将鼠标悬停在文本上以在固定位置显示图像