纯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;}

最终效果图如下图所示

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