h5和css3自定义单选按钮 h5和css3自定义单选按钮

h5和css3自定义单选按钮的实现 ??h5和css3，感觉自己一直都是大概了解其中的属性，等到真正要用的时候，哪怕不会，就去百度或者博客搜一下，怎么说，总觉得自己只学到了皮毛，所以有时间就慢慢对这些基础的东西回顾一下。
今天就来说说单选按钮，input标签默认的单选按钮大家就再也熟悉不过了，可能有些人会觉得，嗯....，这个单选按钮不好看，想自己定义一个,这里我就说一种我最近学的一种新方法

这里我用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; }

最后就是这个样子