h5和css3自定义单选按钮

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