心得笔记

纯CSS+HTML自定义切换样式，可自定义checkbox选项框,radio按钮等简单强大灵活的css使用方法，纯css实现样式切换

作者：何兴林 发布时间: 2017-06-01 阅读：

例子：

checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结

实现思路

纯css实现样式切换的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是

隐藏原生input，样式定义的过程留给label （那为什么不直接改变checkbox的样式？因为checkbox作为浏览器默认组件，样式更改上并没有label那么方便，很多属性对checkbox都是不起作用的，比如background,而label在样式上基本和div一样’任人宰割’)

而在选择事件上，由于css的“相邻选择符(E+F)”的存在，让我们可以直接利用html的默认checkbox，免去了js模拟选择的麻烦。

<style>

    input[type=checkbox]{
        display: none;
    }
    input[type=checkbox]:checked+label{
        background: red;
    }
    input[type=checkbox]:checked+label::before{
        content: attr(data-id);
    }
    input[type=checkbox]:checked+label+div{
        display: none;
    }
    label{
        padding-left: 10px;
    }
    </style>
<input type="checkbox" id="in1" />
<label for="in1" data-id="已经切换了   ">点击我切换颜色</label>

<div>我是一个div</div>

如此，css这里的选择器只要灵活使用就可以应付很多东西了，切换一个块级元素的样式使用css就可以搞定了，只要灵活使用，一些简单的样式切换可以完全不必使用js就能实现了，希望对大家有帮助。有新的发现也可以一起分享一些探讨一些更多的使用方法。我的博客：http://blog.yunzhancms.com/

文章地址：http://blog.yunzhancms.com/index.php?s=/Article/detail/id/202 欢迎转载，转载时请注明出处