ionic的checkbox分析

以前分析了一个原生的checkbox，趁热打铁分析ionic的自带checkbox.

html

<label class="checkbox">
  <input type="checkbox">check
</label>

css

- checkbox

.checkbox {
  position: relative;
  display: inline-block;
  padding: 7px 7px;
  cursor: pointer; }

定义了一个父节点。
display: inline-block;此元素会被显示为内联元素，元素先后没有换行符。
- checkbox子节点input:before

.checkbox input:before{      
    display: table;
    width: 100%;
    height: 100%;
    border-color: #ddd;
    border-width: 1px;
    border-style: solid;
    border-radius: 28px;
    background: #fff;
    content: ' ';
    -webkit-transition: background-color 20ms ease-in-out;
    transition: background-color 20ms ease-in-out; }

display:table;让元素的子节点像table元素同样。
使用基于表格的CSS布局，使咱们可以轻松定义一个单元格的边界、背景等样式，而不会产生由于使用了table那样的制表标签所致使的语义化问题。
width: 100%;height: 100%;高度宽度。

border-color: #ddd;border-width: 1px;border-style: solid;border-radius: 28px;

定义一个圆形的边框，浅灰色。
transition: background-color 20ms ease-in-out;这是一个CSS3过渡效果。即背景颜色有2ms的过分。
综上，input:before只是给了一个边框的效果。
- checkbox子节点input:after

.checkbox input:after{
  -webkit-transition: opacity 0.05s ease-in-out;
  transition: opacity 0.05s ease-in-out;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: 33%;
  left: 25%;
  display: table;
  width: 14px;
  height: 6px;
  border: 1px solid #fff;
  border-top: 0;
  border-right: 0;
  content: ' ';
  opacity: 0; }

这个就是那个checked后显示的对号。
transition: opacity 0.05s ease-in-out;表示一个透明度的渐变。
ease-in-out:
ease 规定慢速开始，而后变快，而后慢速结束的过渡效果;
ease-in 规定以慢速开始的过渡效果;
ease-out 规定以慢速结束的过渡效果;
ease-in-out 规定以慢速开始和结束的过渡效果
transform: rotate(-45deg);旋转45度。
后面的其实就在弄出“对号”

checkbox子元素Input:checked:before

.checkbox input:checked:before {
   background: #387ef5;
   border-color: #387ef5;
   border-width: 2px;
}

当checked时，Input:before的背景颜色和边框颜色都是蓝色。

checkbox子元素Input:checked:after

.checkbox input:checked:after{
   opacity: 1; 
}

当checked时，input:after透明度为0(显示那个“对号”).

结论

综上所述，
input:before是一个边框效果
input:after是一个“对号”效果
当checked时，input:after（对号）显示，input:before（原来的灰色边框）的背景和边框都变为蓝色。