GOOCODE - Find your code/scripts

3 We know HTML default check box style is very simple, and treated to pictures instead of the check box will beautify the way of trouble page form, then this article will take you to understand with examples about the use of CSS3 will be checkbox checkbox style landscaping, and bring cool sliding effect.


HTML
Usually we use the following html structure, we give the check box to define id # checkbox_a1, and then use the label for property associated with it, so, when the user clicks on the label, in fact, equivalent to clicking the # checkbox_a1.

<input type="checkbox" id="checkbox_a1" class="chk_1" /> 
<label for="checkbox_a1">check</label> 

CSS
By label and checkbox, we can hide the checkbox, and the label production for a variety of beautiful cool checkbox style. We can use: before and: after pseudo-elements to create the effect of a variety of effects, such as a sliding button. These effects are available through the adjacent sibling selector to select the checkbox adjacent label to achieve, 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'; 
    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; 
} 

Browse the results page, click on the label when the check box check mark appears to indicate the selected state, click again, the check mark disappears, indicating unchecked.
DEMO, we provided four examples, basically meet the needs of the page common checkboxes style, there is a need can download the source code, you can copy the css styles. You can also make appropriate changes to css styles based on project needs.

Additional information
Beautifying effect check box can support in IE9 + browser, then ie8 and below the browser needs to restore the default style, use the following code:

<!--[if lte IE 8]> 
<link href="ie8.css" rel="stylesheet" /> 
<![endif]-->