Pure CSS Checkbox (Chrome Only?)

by acbabis

HTML

<input type="checkbox"/>

CSS

input[type="checkbox"] {
}

input[type="checkbox"]:after {
    content: ' ';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: red
}

input[type="checkbox"]:hover:after {
    background-color: rgb(200, 0, 0);
}

input[type="checkbox"]:active:after {
    background-color: rgb(100, 100, 255);
}

input[type="checkbox"]:checked:after {
    background-color: blue;
}

input[type="checkbox"]:checked:hover:after {
    background-color: rgb(0, 0, 200);
}

input[type="checkbox"]:checked:active:after {
    background-color: rgb(255, 100, 100);
}