CSS效果--Checkbox纯CSS+HTML实现与示例。为了美化和统一视觉效果，提出了checkbox的自定义。这里总结一下实现方法。实现纯css思想的主要方式是利用label标签的模拟功能。标签的for属性可以与特定的输入元素相关联。即使input本身对用户不可见，在有了label对应之后，用户也可以通过与label标签交互直接替换原来的input——这就给我们Stylemocks留下了空间。简而言之：隐藏原来的input，把样式定义的过程交给label（那为什么不直接改变checkbox的样式呢？因为checkbox是浏览器的默认组件，样式的改变没有label方便，还有很多属性是给checkbox的，那些不起作用的，比如background，label在样式上和div基本一样，“可以被宰”）还有在选择事件中，由于css的“相邻选择器（E+F）”的存在，我们可以直接使用html的默认checkbox，省去了js模拟选择的麻烦。Demo中有详细说明，DEMO的部分CSS3属性只写了webkit前缀，所以建议使用以webkit为核心的浏览器查看本页面的HTML代码：HTML构建完成，对应的css接下来是：/*隐藏所有复选框*/input[type='checkbox']{display:none;}/*模拟标签。背景图是随意拼凑的，别吐槽有味道*//*过渡效果就是做一个背景切换的效果。这里只是演示。其实这个过渡不是加更自然的*/label{display:inline-block;宽度：60px；高度：60px；位置：相对；背景：网址（//www.chitanda.me/images/blank.png）；背景位置：00px；-webkit-transition:background0.5slinear;}/*使用相邻选择器和checkbox`:checked`的状态伪类模拟默认选中效果（即点击后刻度线效果）*//*如果这个短带代码注释，点击后不会给用户反馈*//*因为标签本身点击后没有选中，checkbox隐藏后，只能手动模拟这种状态*/input[type='checkbox']:checked+label{background-position:0-60px;}上面代码的效果如下，好像还可以，但是仔细想想，好像少了点什么：对应的提示文字选项可能是不懂css的新手，这时候第一反应就是用p标签或者span标签在标签后面加上文字。但是这种方法不是很优雅。我个人推荐使用css的::before和::after伪元素（::before和:before是一回事。但是，为了区分“伪元素”和“伪类”，W3C建议伪元素use::Forpseudo-classes:)/*伪元素生效很简单，定义`content`即可，其余属性和普通div一样*/label::after{content：属性（数据名称）；/*使用attr可以减少css代码量，将data-name写在html部分的label属性中*/display:inline-block;位置：相对；宽度：120px；高度：60px；左：100%；垂直对齐：中间；margin:10px;}当然，既然可以用::after模拟标签的文字，那么也可以用::before来模拟标签的checkbox样式，这里就不分析了。下面是伪类和伪元素的区别：1）伪类：存在的意义是通过选择器找到DOM树中不存在的信息和常规CSS选择器无法获得的信息。伪类以冒号:开头，后跟伪类的名称和括在括号中的可选参数。常用的伪类：:active为激活的元素添加样式。:focus向具有键盘输入焦点的元素添加样式。:hover当鼠标悬停在元素上时向元素添加样式。:link为未访问的链接添加样式。:visited为已访问的链接添加样式。:first-child将样式添加到元素的第一个子元素。:checked为选中的控件元素添加样式2）伪元素：伪元素在DOM树中创建一些抽象元素，这些抽象元素在文档语言中是不存在的（可以理解为html源码）；注意：css3为了区分伪类和伪元素，规定伪类前面有一个冒号，伪元素前面有两个冒号。常用的伪元素::before是action元素插入dom的第一个子节点::after是action元素的最后一个子节点插入dom相同：通过选择器给元素添加样式不同：伪-elements会创建一个元素，但不是真正的Html元素，伪类相当于为元素创建一个类样式实例：自定义radiohtml代码：csscode:input{display:none;}label{display:inline-block;宽度：30px；高度：30px；边框：1px实心#333；边界半径：50%；position:relative;}label::after{-webkit-transition:all.5sease;-moz-transition:所有.5s轻松;-o-transition:所有.5s轻松；-ms-transition:所有.5s轻松；过渡：所有.5s轻松；游标：指针；位置：绝对；宽度：16px；高度：16px；:50%;顶部边距：-8px；左边距：-8px；z-索引：1；内容：'';border:1pxsolid#333;}input:checked+label::after{背景：红色;}实现效果结果：点击前：点击后：示例：自定义复选框HTML代码：css代码：input{display:none;}标签{显示：内联块；宽度：30px；高度：30px；边框：1px实心#333；position:relative;}label::after{-webkit-transition:opacity.5sease;-moz-transition:不透明度。5秒轻松；-o-transition:opacity.5sease;-ms-transition:不透明度.5s缓和；过渡：不透明度.5s缓和；游标：指针；checked+label::after{border:2pxsolid#d73d32;边框顶部：无；右边界：无；-webkit-变换：旋转（-45deg）；-ms-变换：旋转（-45deg）；旋转（-45度）；宽度：20px；高度：10px；顶部：50%；顶部边距：-8px；左：50%；左边距：-10px；之后：样式中使用了css3选择器。想了解更多可以查看：《CSS基础篇--CSS3属性选择器与(:not)选择器》参考地址：https://segmentfault.com/a/11...
