CSS查漏補缺（二）——自定義checkbox樣式

因爲原生的checkbox樣式比較難看，因此咱們常常須要改寫它的樣式，美化複選框，因此今天總結下自定義checkbox樣式的方法，上代碼：

html文件

<label class="checkbox-inline">
    <input type="checkbox" class="checkbox" name="hobby">
    <span class="hobby">羽毛球</span>
    <span class="checkmark"></span>
</label>
<label class="checkbox-inline">
    <input type="checkbox" class="checkbox" name="hobby">
    <span class="hobby">跑步</span>
    <span class="checkmark"></span>
</label>

css

.checkbox-inline{
    position: relative;
}
.checkbox{
    position: absolute;
    width: 0;
    height: 0;
}
.checkmark{
    position: absolute;
    top: 2px;
    left: 0;
    height: 15px;
    width: 15px;
    border: 1px solid;
    background-color: #fff;
    border-radius: 10px;
}
.hobby{
    padding-left: 20px;
}
.checkbox-inline input:checked ~ .checkmark {
    background-color: #492c94;
}
.checkbox-inline input:checked ~ .checkmark:after {
    display: block;
}
.checkbox-inline .checkmark:after {
    display: none;
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

效果圖（未選中與選中對比）：

採起的作法是

1. 先將原生的checkbox樣式隱藏，設置寬高爲0，使其隱藏不佔位。
2. 在label標籤裏面添加額外的span標籤，用來作自定義樣式
3. 添加僞元素，利用css3的transform屬性作矩形旋轉，作出打勾的樣式，並將其隱藏。
4. 當checkbox被選中時，利用css3的選擇器:checked，匹配每一個已被選中的 checkbox 元素；再使用兄弟選擇符~，匹配到同層級checkmark類，就能夠顯示和觸發自定義checkbox選中狀態的樣式了

這裏還涉及到一個知識點，僞元素屬於主元素的一部分，所以點擊僞元素觸發的是主元素的click事件。