macem space

For a years we use javascript plugin for style checkbox and radio inputs. There was a lot of problems when we create dynamic content. But now we can use only CSS, in chrome or safari we have a special rule -webkit-appearance: none  so we can style directly input. For Firefox, Opera, IE9 we must use pseudo-element :before.

Html code

<div class="radio">
 <input type="radio" name="radio" id="radio">
 <label for="radio">Radio Button</label>
</div>

CSS code

Input should be clicable and invisible.

input[type="checkbox"],
input[type="radio"] {
    float: left;
    width: auto;
    margin: 1px 5px 0 0;
    position: relative;
    z-index: 1;
    opacity: 0;
}

We create pseudoelement before label tag and style as radio/checkbox button.

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    content: ';
    float: left;
    width: 16px;
    height: 16px;
    position: relative;
    font-size: 23px;
    font-weight: normal;
    line-height: 15px;
    color: #888;
    margin: -3px 10px 6px -20px;
    border: solid 1px #ccc;
    background: #fff; 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

input[type="checkbox"] + label:before:hover,
input[type="radio"] + label:before:hover {
    border-color: #aaa;
}

Create style for checked inputs.

input[type="radio"]:checked + label:before {
    content: '●';
}
input[type="checkbox"]:checked + label:before {
    content: '✓';
}

Solution use pure CSS and work for Chrome, Firefox, Opera and IE9>.

Source: http://www.adoumas.com/blogpost/pure-css3-checkboxes-and-radio-buttons