對復選框自定義樣式，我們以前一直用的腳本來實現，不過現在可以使用新的偽類 :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;
}

點擊后，得到焦點，現在的樣子：

多選框外多出一層陰影。

以上就是如何修改input中[type="checkbox"]的樣式的詳細內容，更多請關注php中文網其它相關文章！