css | radio单选按钮样式自定义

radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的.

单选按钮最常见的地方就是性别的选择,这里以此为例,html代码如下:

<form action="" class="formSex">
    <span>性别：</span>
    <input type="radio" name="sex" id="male" class="sex formInput">
    <label for="male">男</label>
    <input type="radio" name="sex" id="female" class="sex formInput">
    <label for="female">女</label>
    <input type="radio" name="sex" id="secret" checked class="sex formInput">
    <label for="secret">保密</label>
</form>

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