自定義input[type="checkbox"]的樣式

對複選框自定義樣式，咱們之前一直用的腳原本實現，不過如今可使用新的僞類 :checkbox 來實現。

若是直接對複選框設置樣式，那麼這個僞類並不實用，由於沒有多少樣式可以對複選框起做用。不過，卻是能夠基於複選框的勾選狀態藉助組合選擇符來給其餘元素設置樣式。

不少時候，不管是爲了表單元素統一，仍是爲了用戶體驗良好，咱們都會選擇 label 元素和 input[type="checkbox"] 一塊兒使用。當<label>元素與複選框關聯以後，也能夠起到觸發開關的做用。

思路：

1. 能夠爲<label>元素添加生成性內容(僞元素)，並基於複選框的狀態來爲其設置樣式；

2. 而後把真正的複選框隱藏起來；

3. 最後把生成內容美化一下。

解決方法：

1. 一段簡單的結構代碼：

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

2. 生成一個僞元素，做爲美化版的複選框，先給僞元素添加一些樣式：

input[type="checkbox"] + label::before {
    content: "\a0";  /*不換行空格*/
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background-color: silver;
    text-indent: .15em;
    line-height: .65;  /*行高不加單位，子元素將繼承數字乘以自身字體尺寸而非父元素行高*/
}

如今的樣子：

原來的複選框仍然可見，可是咱們先給複選框的勾選狀態添加樣式：

3. 給複選框的勾選狀態添加不一樣的樣式：

input[type="checkbox"]:checked + label::before {
    content: "\2713";
    background-color: yellowgreen;
}

如今的樣子：

4. 如今把原來的複選框隱藏：

input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

如今的樣子：

隱藏原來的複選框時，若是使用 display: none; 的話，那樣會把它從鍵盤 tab 鍵切換焦點的隊列中徹底刪除。

因而可採用剪切的方式，讓剪切後的尺寸爲零，這樣就隱藏了原來的多選框。

 

延伸

在聚焦和禁用時改變它的樣式：

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
    background-color: gray;
    box-shadow: none;
    color: #555;
}

點擊後，獲得焦點，如今的樣子：

多選框外多出一層陰影。