css3 radios & checkboxes

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">        
        <title>Styling radios &amp; checkboxes using CSS3</title>
    </head>
    
    <body>
        <h1>Styling radios &amp; checkboxes using CSS3</h1>
        <h2>*only for webkit*</h2>
    
        <div class="col">
            <h3>Radios</h3>
            <p><input type="radio" name="radio" id="radio1" /><label for="radio1">Radio 1 </label></p>
            <p><input type="radio" name="radio" id="radio2" /><label for="radio2">Radio 2</label></p>
            <p><input type="radio" name="radio" id="radio3" disabled /><label for="radio3">Radio 3 disabled</label></p>
            <p><input type="radio" name="radio" id="radio4" disabled checked /><label for="radio4">Radio 4 disabled checked </label></p>
        </div>
        
        <div class="col">
            <h3>Checkboxes</h3>
            <p><input type="checkbox" name="checkbox1" id="checkbox1" /><label for="checkbox1">Checkbox 1 </label></p>
            <p><input type="checkbox" name="checkbox2" id="checkbox2" /><label for="checkbox2">Checkbox 2 </label></p>
            <p><input type="checkbox" name="checkbox3" id="checkbox3" disabled /><label for="checkbox3">Checkbox 3 disabled</label></p>
            <p><input type="checkbox" name="checkbox4" id="checkbox4" disabled checked /><label for="checkbox4">Checkbox 4  disabled checked</label></p>
        </div>
    </body>
</html>

CSS

/* RADIOS & CHECKBOXES STYLES */

/* base styles */
input[type="radio"], 
input[type="checkbox"] {
    height: 1.2em;
    width: 1.2em;
    vertical-align: middle;
    margin: 0 0.4em 0.4em 0;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: -webkit-linear-gradient(#FCFCFC, #DADADA);
    -webkit-appearance: none;
    -webkit-transition: box-shadow 200ms;
     box-shadow:inset 1px 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1);
}


/* checkbox checked */
input[type="checkbox"]:checked:before {
font-weight: bold;
color: rgba(0, 0, 0, 0.7);
content: '\2713';
-webkit-margin-start: 0;
margin-left: 2px;
font-size: 0.9em;
}

/* disabled input */
input:disabled {
opacity: .6;
box-shadow: none;
background: rgba(0, 0, 0, 0.1);
box-shadow:none;
}

/* style label for disabled input */
input:disabled + label {
opacity: .6;
cursor:default;
-webkit-user-select: none;
}