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

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