radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的.
单选按钮最常见的地方就是性别的选择,这里以此为例,html代码如下:
性别：
男
女
保密
css改变radio按钮样式,这里使用了伪类(在css中一定要擅用伪类,能更好的实现功能):
.formSex input{
display: none;
margin-top: 10px;
}
.formSex label{
box-sizing: border-box;
position: relative;
margin-right: 34px;
margin-top: 10px;
}
.formSex label::before{
display: inline-block;
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgb(219, 219, 219);
margin-right: 6px;
vertical-align: bottom;
}
.formSex input:checked+label::before{
border: 1px solid #fff;
background-color: #fff;
}
.formSex input:checked+label::after{
display: inline-block;
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
left: 0;
bottom: 0;
background-color: #F60;
}
在不使用js的情况下就改变了radio的按钮样式了,既然是自定义样式,就可以随心情自己修改了,我这里实现的效果是这样的
image.png
