6-3 使用者体验 -- 自定义checkbox

1. 这一小节对于我来说真的是福音，我一直很苦恼（对于checkbox）。在我未接触书本之前，我一直使用默认样式的checkbox，以前尝试修改它，给它定义宽度什么的都尼玛没有效果，这就让人很头疼了！

2. 这一小节练习的还是伪元素，我们需要实现以下的checkbox

自定义checkbox

相对于每个浏览器都不一样的checkbox，chrome的默认样式还算可以接受

chrome默认样式

小测试

html

Awesome!

第一步：
利用伪元素创建一个大小类似于原样式的方块

css

.checkbox input[type="checkbox"]+label::before{ 
   content: '\a0';  /* non-break-block*/
   display: inline-block;  
   vertical-align: .1em; 
   width: .8em; 
   height: .8em;  
   margin-right: .2em;  
   border-radius: .2em;
   background: silver; 
   text-indent: .15em; 
   line-height: .65em; 
   transition: background .2s;
}

关于第一行的不换行空格，其实是个占位符

  content: '\a0';  /* non-break-block*/

具体想了解不换行空格，可以看看这篇文章，写的很具体

http://www.cnblogs.com/yjf512/p/3216392.html

效果：

第二步：
现在我们需要用符合可及性的方式来隐藏原来的checkbox,表示我们不能使用display:none,因为这样会把它完全从键盘Tab键里移动的顺序里移除。所以可以改用这种方式

input[type="checkbox"]{   
  position: absolute;  
  clip: rect(0,0,0,0);
}

效果：

第三步：
设置checked, focus样式

.checkbox input[type="checkbox"]:checked + label::before{  
  content: '\2713';    
  background: yellowgreen;
}
.checkbox input[type="checkbox"]:focus + label::before{  
  box-shadow: 0 0 0 1px #58a;
}

checked 状态

自定义checkbox完成

---

利用这个特性可以制作一些按钮状态（on和off不同的样式）

no checked

checked

当然这样的效果也可以用自定义属性（或者改变类）实现，不过需要一点JS代码。不过这种纯CSS实现方法更加有趣！