Custom CSS3 Checkboxes and Radio Buttons

Custom checkboxes built with just CSS3 and HTML

Styling a form is complicated due to the number of limitations involved, especially when it comes to styling checkboxes and radio buttons. In the past, this was done with the help of Javascript; however, after CSS was updated with new selectors and pseudo-classes it became possible to do this solely with CSS. The idea is to detect checked, unchecked and disabled checkboxes and radios, hide them, and put custom objects in their place. This can be done using :checked and :disabled CSS pseudo-classes.

In the sandbox below, you can find an example of custom-designed checkboxes and radio buttons which illustrate the technique.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="card">
<form>
<h3>Checkboxes</h3>
<div class="form-group">
<input id="checkbox-1" class="checkbox" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="label">Unchecked</label>
</div>
<div class="form-group">
<input id="checkbox-2" class="checkbox" name="checkbox-2" type="checkbox" checked>
<label for="checkbox-2" class="label">Checked</label>
</div>
<div class="form-group">
<input id="checkbox-3" class="checkbox" name="checkbox-3" type="checkbox" disabled>
<label for="checkbox-3" class="label">Disabled</label>
</div>
<div class="form-group">
<input id="checkbox-4" class="checkbox" name="checkbox-4" type="checkbox" disabled checked>
<label for="checkbox-4" class="label">Disabled Cecked</label>
</div>
<h3>Radio Buttons</h3>
<div class="form-group">
<input id="radio-1" class="radio" name="radios" type="radio">
<label for="radio-1" class="label">Unchecked</label>
</div>
<div class="form-group">
<input id="radio-2" class="radio" name="radios" type="radio" checked>
<label for="radio-2" class="label">Checked</label>
</div>
<div class="form-group">
<input id="radio-3" class="radio" name="radios" type="radio" disabled>
<label for="radio-3" class="label">Disabled</label>
</div>
<div class="form-group">
<input id="radio-3" class="radio" name="radio" type="radio" disabled checked>
<label for="radio-3" class="label">Disabled</label>
</div>
</form>
</div>
HTML
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

@font-face {
font-family: "sample-font";
src:url("fonts/sample-font.eot");
src:url("fonts/sample-font.eot?#iefix") format("embedded-opentype"),
url("fonts/sample-font.woff") format("woff"),
url("fonts/sample-font.ttf") format("truetype"),
url("fonts/sample-font.svg#sample-font") format("svg");
font-weight: normal;
font-style: normal;
}

body {
background: #e2e2e2;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
}

.card {
background: #fff;
border-radius: 2px;
display: inline-block;
margin: 30px 0;
padding: 20px;
max-width: 300px;
width:100%;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
}

h3 {
margin: 18px 0 12px;
}

h3:first-of-type {
margin-top: 0;
}

.form-group + .form-group {
margin-top: 5px;
}

.checkbox,
.radio {
opacity: 0; /* display:none may cause problems with form validation */
position: absolute;
}

.checkbox,
.radio,
.label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}

.label {
position: relative;
}

.checkbox + .label:before,
.radio + .label:before {
content: '';
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin: -3px 10px 0 0;
text-align: center;
box-sizing: border-box;
}

.radio + .label:before {
border-radius: 50%;
}

.checkbox:checked + .label:before {
content: "\6d";
font-family: "sample-font";
font-size: 13px;
background: #2892ed;
border: none;
color: #fff;
line-height:15px;
}

.radio:checked + .label:before {
box-shadow: inset 0 0 0 4px #fff;
background: #2892ed;
}

.checkbox:disabled + .label,
.radio:disabled + .label {
opacity: 0.8;
color:#888;
}

.checkbox:disabled + .label:before,
.radio:disabled + .label:before {
background: #f7f7f7;
}

.checkbox:disabled:checked + .label:before,
.radio:disabled:checked + .label:before {
background: #f7f7f7;
border: 1px solid #ccc;
color:#bcbcbc;
}

.radio:disabled:checked + .label:before {
box-shadow: inset 0 0 0 4px #f7f7f7;
background: #aaa;
}
CSS
Browser support:
           
9+