本文介绍了一种使用CSS自定义样式来实现单选按钮的方法，通过伪元素及属性选择器，使得按钮在选中状态时拥有不同的视觉效果。这种方案可以提升用户体验，并且不需要额外的JavaScript支持。
.m-addapi-checkstate label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
width: 1em;/*em相对当前font-size大小 */
height: 1em;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #5BD1AD;
text-indent: .15em;
line-height: 1;
font-size: 14px;
font-weight: 100;
margin-bottom: 3px;
}
.m-addapi-checkstate input[type="radio"]:checked + label::before {
background-color: #5BD1AD;
background-clip: content-box;/*绘制背景区域 */
padding: .09em;
}
.m-addapi-checkstate input[type="radio"]{
position: absolute;
clip: rect(0, 0, 0, 0);
}
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
width: 1em;/*em相对当前font-size大小 */
height: 1em;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #5BD1AD;
text-indent: .15em;
line-height: 1;
font-size: 14px;
font-weight: 100;
margin-bottom: 3px;
}
.m-addapi-checkstate input[type="radio"]:checked + label::before {
background-color: #5BD1AD;
background-clip: content-box;/*绘制背景区域 */
padding: .09em;
}
.m-addapi-checkstate input[type="radio"]{
position: absolute;
clip: rect(0, 0, 0, 0);
}
扫一扫
1508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
