CSS3 to beautify checkbox checkbox example

Html

Usually we use the following HTML structure, we define ID#CHECKBOX_A1 for the check box, and then use the label's for property to associate with it, so that when the user clicks on the label, it is actually the equivalent of clicking on the #checkbox_a1.


Check

Css

By label and checkbox, we can hide the checkbox and make the label a nice, cool check box style. We can use: Before and: After pseudo elements to make a variety of effects, such as the effect of sliding buttons. These effects can be achieved by selecting the label adjacent to the checkbox through the neighboring sibling selector, and here is a simple example:

. chk_1 {
Display:none;
}

. Chk_1 + Label {
Background-color: #FFF;
border:1px solid #C1CACA;
box-shadow:0 1px 2px rgba (0, 0, 0, 0.05), inset 0px-15px 10px-12px rgba (0, 0, 0, 0.05);
padding:9px;
border-radius:5px;
Display:inline-block;
position:relative;
margin-right:30px;
}
. chk_1 + label:active {
box-shadow:0 1px 2px Rgba (0,0,0,0.05), inset 0px 1px 3px rgba (0,0,0,0.1);
}

. chk_1:checked + Label {
Background-color: #ECF2F7;
border:1px solid #92A1AC;
box-shadow:0 1px 2px rgba (0, 0, 0, 0.05), inset 0px-15px 10px-12px rgba (0, 0, 0, 0.05), inset 15px 10px-12px Rgba (255, 255, 255, 0.1);
Color: #243441;
}

. chk_1:checked + Label:after {
Content: ' \2714 '//tick mark
Position:absolute;
top:0px;
left:0px;
Color: #758794;
width:100%;
Text-align:center;
Font-size:1.4em;
padding:1px 0 0 0;
Vertical-align:text-top;
}

Browsing the page effect, when the Click Label, check box appears checkmark, indicating the selected state, click again, check the symbol disappeared, indicating the cancellation of the selected state.

We provide 4 examples, basic to meet the common page check box style requirements, there is a need to directly download the source code, copy CSS style can be. You can also modify the CSS style to fit the needs of the project.
Supplementary notes
The beautification of the check box can be supported in the Ie9+ browser, then IE8 and the following browsers need to restore the default style, using the following code: