版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_41355260/article/details/81567184
input[type="radio"]+span::before{
content: "\a0";//不换行空格
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
font-size: 24px;
margin-right: 16px;
border-radius: 50%;
border: 1px solid #5b9bd4;
text-indent:.15em;
line-height: 1;
}
input[type="radio"]:checked+span::before{
background: #5b9db4;
background-clip: content-box;
padding: .2em;
}
input[type="radio"]{
position: absolute;
clip: rect(0,0,0,0);
}
参考:https://www.cnblogs.com/xinjie-just/p/5911086.html
样式二:
<input type="radio" name="myRadio" class="radio" /><span>是</span>
<input type="radio" name="myRadio" class="radio" /><span>否</span>
/*public for radio*/
input[type="radio"] + span::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 0.6em;
height: 0.6em;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #ffb251;
text-indent: .15em;
line-height: 1;
padding: .2em;
}
input[type="radio"]:checked + span::before {
background-color: #ffb251;
background-clip: content-box;
padding: .2em;
}
input[type="radio"] {
position: absolute;
opacity: 0;
z-index: 3;
width: 30px;
height: 30px;
}