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（原來的灰色邊框）的背景和邊框都變爲藍色。