h5和css3自定义单选按钮的实现
h5和css3，感觉自己一直都是大概了解其中的属性，等到真正要用的时候，哪怕不会，就去百度或者博客搜一下，怎么说，总觉得自己只学到了皮毛，所以有时间就慢慢对这些基础的东西回顾一下。
今天就来说说单选按钮，input标签默认的单选按钮大家就再也熟悉不过了，可能有些人会觉得，嗯....，这个单选按钮不好看，想自己定义一个,这里我就说一种我最近学的一种新方法
<label>
<input type="radio" name="1">
<span></span>
</label>
<label>
<input type="radio" name="1">
<span></span>
</label>
<label>
<input type="radio" name="1">
<span></span>
</label>
这里我用label标签来自定义一组单选按钮
当然如果你不添加任何的style的话，那么结果就是
是不是和默认的没有什么区别
那么，接下来，我们不妨给它加一点style
例如
label{
width: 100px;
height: 100px;
border: 1px solid black;
}
给它加上宽和高，以及给它一个边框，然后它就变成了
是不是有点奇怪，好像这没有100px啊，原来是因为label并不是块级元素，那么知道问题就简单了
*{
margin: 0;
padding: 0;
}
label{
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
}
这样是不是就好点了，当然我们还希望，原有的按钮给隐藏掉，让span填充整个label，只要这个input被checked，我们就来改变span的颜色,顺便再做一些其他样式
的修改
*{
margin: 0;
padding: 0;
}
label{
position: relative;
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
overflow: hidden;
border-radius: 50%;
}
label > span{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
input{
position: absolute;
top: -20px;
}
input:checked + span{
background: palevioletred;
}
最后就是这个样子
当然，我们可以发挥自己的想象，设计更漂亮的个性按钮
点滴积累，study hard and make great progress
