CSS3设置checkbox的样式

一般在网上都能看到各式各样的二选一“按钮”组件，轻松惬意的滑动，朴实快速的效果往往给人以美感，那么这些是怎么实现的呢？

那么lz接下来就一步步讲述自学过程；

No.1 先实现再理解

---

我的习惯是，拿到一个需求，首先理解它，是否能拿到成品，然后再一步步往下理解它，最后完全理解（方法因人而异）

checkbox样式参考网站 http://uploads.xiumu.org/2014/08/checkbox-demo.html

• 尽量用CSS+HTML的方式实现
  过多的dom操作不仅仅会影响代码质量和网页性能，而且在用到MV*前端框架时（例如AngularJS,vue.js），在框架的作用域范围内是无效的（非框架的dom操作都是无效的）。

No.2 写出达到需求的代码

---

• 理解并实现checkbox达到需求

  HTML 代码
  <div class="sect">
<input type="checkbox" id="checkbox" checked>
<label for="checkbox"></label>
</div>

  CSS代码
  .sect{width: 65px; height: 30px; background-color: #cccccc; display:
inline-block; text-align: center; position: relative;}
.sect input[type='checkbox']{visibility: hidden;}
.sect label{width: 30px; height: 28px; display:
block; top:1px; left: 1px; position: absolute;
background-color: #fafafa; z-index: 1; transition: all 0.4s ease;
-o-transition: all 0.4s ease; -moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;}
.sect input[type='checkbox']:checked + .sect{background-color: #32b16c!important;}
.sect input[type='checkbox']:checked + label[for='checkbox']{left: 34px!important;}


这段代码的核心就是通过隐藏checkbox原样式，当checkbox为选中状态时通过CSS加号选择器选择同级label使其居左相应距离，注意label的for属性

其中也涉及到CSS定位，CSS3的transition的动画效果不一一叙述

很明显CSS代码存在一处错误

.sect input[type='checkbox']:checked + .sect{background-color: #32b16c!important;}

CSS加号选择器选择是同级的元素，那么有没有一种选择上级元素的CSS选择器呢？答案是有的。
Selectors Level 4 中已经新增了「Subject 」选择器，类似这样：

!li > p { border:1px solid #CCC; } /* 为 p 的父元素 li 设置一个边框 */

现如今这样的选择器变成了:has()这种类似jQuery API的形式，具体参考http://css4-selectors.com/selectors/

然而父级选择器一直都没有被各大浏览器支持，现在也没有！

No.3 修改最终代码

---

<div class="sect selected{{selected}}">
<input type="checkbox" id="checkbox" checked>
<label for="checkbox" ng-click="changeSelected()"></label>
</div>

最终无奈采用AngularJS的修改CSS类方法实现，这样固然不是一个好的方法，没有很好的理解MV*思想，也希望沟通优化。

Github地址：https://github.com/Elson8080 “一个想成为前端工程师的‘前端工程师’”，欢迎随时沟通~~