纯css自定义radio,checkbox样式，提高用户体验

在页面编写的时候我们需要自定义radio样式，每个浏览器的渲染效果不一样，而且样式是系统默认的，不太美观，所以为了提高用户体验以及美观，我们需要对radio,chenckbox样式进行美化。

这里只选取radio进行样式编写，checkbox以此类推就ok了。

<form action="" method="post">
		<input type="radio" name="sex" id="male" value="male">男
		<input type="radio" name="sex" id="female" value="female">女
	</form>

效果如下图所示

编写思路先说一下，起先把input浏览器渲染的按钮清除掉，采用display:none;然后给子元素添加label标签以至于提高用户体验点击按钮的时候可以关联到文字，这样不止点击按钮才可以选中，同时点击文字也可以选中。

<form action="" method="post">
		<label for="male" class="main">
			<input type="radio" name="sex" id="male" value="male">男
			<span id="test"></span>
		</label>
		<label for="female" class="main">
			<input type="radio" name="sex" id="female" value="female">女
			<span id="test"></span>
		</label>
	</form>

.main{
			display: inline-block;/*在一行显示，*/
		}
		.main input{
			display: none;/*对.main input进行隐藏，用span.test来代替按钮，再进行样式编写*/
		}
		#test{
			box-sizing: border-box;//告诉浏览器使用什么盒模型
			position: relative;//进行定位
			display: inline-block;//行内显示
			width: 16px;
			height: 16px;
			border: 2px solid red;
			border-radius: 50%;
			float: left;//浮动，写到这一部按钮本来是在文字后面，左浮动使按钮在文字前面
			margin: 4px 10px 0;
			padding: 2px;//和background-clip是一起使用的，不知道background-clip: content-box;的同学去查一下什么意思
			background-clip: content-box;
		}
		input:checked + span{//input:checked是选择每个被选中的 <input> 元素。+ span：选择紧接在 <input> 元素之后的所有 <span> 元素。
			background: green;
		}

最终效果图如下图所示

对于样式，同学们可自定义，如有写的不到位之处，还请见谅。