Web前端（2）
一般在网上都能看到各式各样的二选一“按钮”组件，轻松惬意的滑动，朴实快速的效果往往给人以美感，那么这些是怎么实现的呢？
那么lz接下来就一步步讲述自学过程；
No.1 先实现再理解
我的习惯是，拿到一个需求，首先理解它，是否能拿到成品，然后再一步步往下理解它，最后完全理解（方法因人而异）
checkbox样式参考网站
尽量用CSS+HTML的方式实现
过多的dom操作不仅仅会影响代码质量和网页性能，而且在用到MV*前端框架时（例如AngularJS,vue.js），在框架的作用域范围内是无效的（非框架的dom操作都是无效的）。
No.2 写出达到需求的代码
理解并实现checkbox达到需求
&div class="sect"&
&input type="checkbox" id="checkbox" checked&
&label for="checkbox"&&/label&
.sect{width: 65 height: 30 background-color: # display:
inline- text-align: position:}
.sect input[type='checkbox']{visibility:}
.sect label{width: 30 height: 28 display:
top:1 left: 1 position:
background-color: # z-index: 1; transition: all 0.4
-o-transition: all 0.4 -moz-transition: all 0.4
-webkit-transition: all 0.4}
.sect input[type='checkbox']:checked + .sect{background-color: #32b16c!}
.sect input[type='checkbox']:checked + label[for='checkbox']{left: 34px!}
这段代码的核心就是通过隐藏checkbox原样式，当checkbox为选中状态时通过CSS加号选择器选择同级label使其居左相应距离，注意label的for属性
其中也涉及到CSS定位，CSS3的transition的动画效果不一一叙述
很明显CSS代码存在一处错误
.sect input[type='checkbox']:checked + .sect{background-color: #32b16c!}
CSS加号选择器选择是同级的元素，那么有没有一种选择上级元素的CSS选择器呢？答案是有的。
Selectors Level 4 中已经新增了「Subject 」选择器，类似这样：
!li & p { border:1px solid #CCC; }
/* 为 p 的父元素 li 设置一个边框 */
现如今这样的选择器变成了:has()这种类似jQuery API的形式，具体参考
然而父级选择器一直都没有被各大浏览器支持，现在也没有！
No.3 修改最终代码
&div class="sect selected{{selected}}"&
&input type="checkbox" id="checkbox" checked&
&label for="checkbox" ng-click="changeSelected()"&&/label&
最终无奈采用AngularJS的修改CSS类方法实现，这样固然不是一个好的方法，没有很好的理解MV*思想，也希望沟通优化。
Github地址： “一个想成为前端工程师的‘前端工程师’”，欢迎随时沟通~~
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3341次
排名：千里之外
原创：10篇查看: 5231|回复: 0
纯CSS+HTML自定义checkbox效果
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模拟选择的麻烦。
DEMO的部分CSS3属性只写了webkit前缀，所以建议用webkit内核的浏览器查看本页：&div class=&wrap&&
&!-- `input`的id必须有，这个是label进行元素匹配所必需的 --&
&!-- 可以看到每个input的id和label的“for”属性对应同一字符串 --&&input type=&checkbox& id=&checkbox01& /&&label for=&checkbox01&&&/label&&input type=&checkbox& id=&checkbox02& /&&label for=&checkbox02&&&/label&&input type=&checkbox& id=&checkbox03& /&&label for=&checkbox03&&&/label&&input type=&checkbox& id=&checkbox04& /&&label for=&checkbox04&&&/label&复制代码HTML构建完成，接下来是对应的css。.wrap {
width: 500
background-color: #EEE;
border: 2px solid #DEF;}/* 隐藏所有checkbox */input[type='checkbox'] {
display:}/* 对label进行模拟.背景图片随便拼凑的，不要吐槽品味*//*
transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然*/label {
display: inline-
height: 60
background: url(//www.chitanda.me/images/blank.png);
background-position: 0 0
-webkit-transition: background 0.5}/*
利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）
*//*如果这段代码注释，点击后将没有任何反馈给用户*//*因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟*/input[type='checkbox']:checked+label {
background-position: 0 -60}复制代码上面代码的效果如下所示，看起来好像也可以了。http://codepen.io/chitanda/pen/OVjarB/
不过仔细想想，貌似缺了点什么：选项对应的提示文字对css不了解的新人可能这时候第一反应就是在label后面用p标签或者span标签来添加文字。不过这种方式都不怎么优雅。个人建议用css的::before和::after伪元素（::before和:before是一个东西。不过为了把“伪元素”和“伪类”区分出来，W3C建议的写法是伪元素用::而伪类用:）伪元素的具体内容这里不多说，(其实是我也对它们的掌握就仅限于用用而已，对这个谈不上理解，就不误人子弟了)/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通div一样 */label::after {
content: attr(data-name);
/*利用attr可以减少量,data-name写在html部分的label属性里*/
display: inline-
width: 120
height: 60
left: 100%;
vertical-align:
margin: 10}复制代码最终效果如下：http://codepen.io/chitanda/pen/KpvRWz/
当然既然可以用::after模拟label的文字，那也就可以用::before模拟label的checkbox样式，这里就不做解析了，贴个我之前的demo,有兴趣的可以自己做下：http://codepen.io/chitanda/pen/XbNBKE/
上一篇：下一篇：CSS3漂亮的自定义Checkbox复选框 9款迷人样式 | HTML5资源教程1057人阅读
前端开发（7）
此方法可以将复选框的默认样式替换成任意样式。如图：
思路：将复选框隐藏，利用lebal元素的焦点传递特性，用lebal的样式替代复选框。
代码如下：
&!DOCTYPE html&
charset="UTF-8"&
&checkbox css change&
type="text/css"&
[type="checkbox"] +
cursor: pointer;
font-size: 1em;
[id^="checkbox-"] +
background-color: #ffffff;
border: 1px solid #666666;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
[id^="checkbox-"] + :active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
[id="checkbox-1"]:checked +
background-color: #F47164;
border: 1px solid #F47164;
[id="checkbox-2"]:checked +
background-color: #84CBC5;
border: 1px solid #84CBC5;
[id="checkbox-3"]:checked +
background-color: #F8D25D;
border: 1px solid #F8D25D;
style="margin-left: 55 margin-right: 16"&状态:&
type="checkbox" value="0" class="check_view_state"
id="checkbox-1" style="display:"&
for="checkbox-1"&&
class="status"&未读&
type="checkbox" value="1" class="check_view_state"
id="checkbox-2" style="display:"&
for="checkbox-2"&&
class="status"&已读&
type="checkbox" value="2" class="check_view_state"
id="checkbox-3" style="display:"&
for="checkbox-3"&&
class="status"&未授权&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6470次
排名：千里之外
原创：25篇
转载：11篇
(2)(9)(10)(1)(6)(4)(2)