美化复选框（给复选框添加样式）

在线演示
本地代码下载

复选框的背景颜色都是可以更改，具体参考css样式来更改。

html:

<input type="checkbox" id="awesome" autofocus />
<label for="awesome">Awesome!label>
<br />
<input type="checkbox" id="awesome2" checked />
<label for="awesome2">Awesome!label>
<br />
<input type="checkbox" id="awesome3" disabled />
<label for="awesome3">Awesome!label>
<br />
<input type="checkbox" id="awesome4" checked disabled />
<label for="awesome4">Awesome!label>

CSS：

<style>
    body { font: 150%/1.6 sans-serif;} 
    input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    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;
        background-color: red;
    }

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

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

    input[type="checkbox"]:disabled+label::before {
        background: gray;
        box-shadow: none;
        color: #555;
        cursor: not-allowed;
    }
style>