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的按钮样式了,既然是自定义样式,就可以随心情自己修改了,我这里实现的效果是这样的