純CSS實現自定義複選框樣式

複選框和單選框在絕大多數瀏覽器裏無法設置樣式（無法修改顏色），而有時需要修改它的樣式。可以通過給input或label增加僞類的方式，但input增加僞類會存在瀏覽器間不支持的情況。採用給label增加僞類的方式更好，還能與複選框關聯，觸發開關。

通過對label增加僞元素，並基於複選框的狀態來爲其設置樣式美化。再把真正的複選框隱藏起來（最好不要用display：none和visibility：hidden方法，因爲它們會將複選框從tab鍵切換焦點的隊列中完全刪除）。

實現代碼：

<style>
    input[type="checkbox"] + label::before {
        content: '\a0'; /* 不換行空格 */
        display: inline-block;
        vertical-align: .2em;
        width: .8em;
        height: .8em;
        margin-right: .2em;
        border-radius: .2em;
        background: silver;
        text-indent: .15em;
        line-height: .65; 
    }

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

    input[type="checkbox"] {
         position: absolute;
         clip: rect(0, 0, 0, 0); /*全部裁剪*/
    }

    input[type="checkbox"]:focus + label::before /*聚焦的樣式*/{
         box-shadow: 0 0 .1em .1em #58a; 
    }

    input[type="checkbox"]:disabled + label::before { /*全部裁剪的樣式*/
        background: gray;
        box-shadow: none;
        color: #555; 
    }
</style>

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

參考資料：《CSS揭祕》