100% CSS-driven Radios & Checkboxes

A javascript-free solution to custom checkboxes and radios. Offers two sizes and designed to work with bootstrap

by Pete Fecteau

HTML

<div class="checkboxes">
    <label>Checkboxes</label>
    <input type="checkbox" id="checkbox-1-1" class="checkbox" />
    <input type="checkbox" id="checkbox-1-2" class="checkbox" />
    <input type="checkbox" id="checkbox-1-3" class="checkbox" />
    <input type="checkbox" id="checkbox-1-4" class="checkbox" />
</div>
<div class="radios">
    <label>Radio Buttons</label>
    <input type="radio" id="radio-1-1" name="radio-1-set" class="radio" checked />
    <input type="radio" id="radio-1-2" name="radio-1-set" class="radio" />
    <input type="radio" id="radio-1-3" name="radio-1-set" class="radio" />
    <input type="radio" id="radio-1-4" name="radio-1-set" class="radio" />
</div>
<hr />
<p>Radios and Checkboxes are really annoying in touchscreen environments. Make them fat-finger-friendly.</p>
<div class="ff-checkboxes">
    <label>Fat Finger Checkboxes</label>
    <input type="checkbox" id="checkbox-1-1" class="ff-checkbox" />
    <input type="checkbox" id="checkbox-1-2" class="ff-checkbox" />
    <input type="checkbox" id="checkbox-1-3" class="ff-checkbox" />
    <input type="checkbox" id="checkbox-1-4" class="ff-checkbox" />
</div>
<div class="ff-radios">
    <label>Fat Finger Radio Buttons</label>
    <input type="radio" id="radio-1-1" name="radio-2-set" class="ff-radio" checked />
    <input type="radio" id="radio-1-2" name="radio-2-set" class="ff-radio" />
    <input type="radio" id="radio-1-3" name="radio-2-set" class="ff-radio" />
    <input type="radio" id="radio-1-4" name="radio-2-set" class="ff-radio" />
</div>

CSS

hr {
    display:block;
    clear:both;
    margin:40px 0;
}
p {
    padding:0 15px 40px;
    color:#a9aaad;
    font-size:13px;
}
label {
    display:block;
    float:left;
    margin-right:15px;
}
.checkboxes, .radios {
    display:block;
    float:left;
    margin:15px;
    clear:left;
}
input[type="checkbox"].checkbox, input[type="radio"].radio {
    display:block;
    -webkit-appearance: none;
    ms--appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    border-radius:500px;
    border:2px solid #a9aaad;
    background-color:#dedfe0;
    height:27px;
    width:27px;
    float:left;
    margin-right:10px;
    cursor:pointer;
    margin-top:-5px;
}
input[type="checkbox"].checkbox {
    border-radius:0;
    height:25px;
    width:25px;
    margin-top:-3px;
}
input[type="checkbox"].checkbox:checked,
input[type="checkbox"].checkbox:checked:active,
input[type="radio"].radio:checked,
input[type="radio"].radio:checked:active {
    background-color: #28a2d5;
    border-color: #2082aa;
}
input[type="checkbox"].checkbox:after, input[type="radio"].radio:after {
    content: '\2714';
    font-size: 14px;
    position: relative;
    top: 2px;
    left: 5px;
    color: #a9aaad;
}
input[type="checkbox"].checkbox:checked:after, input[type="radio"].radio:checked:after {
    color:#FFFFFF;
}
input[type="radio"].radio:after {
    top:3px;
    left:6px;
}

.ff-checkboxes, .ff-radios {
    display:block;
    float:left;
    margin:15px;
    clear:left;
}
input[type="radio"].ff-radio {
    display: block;
    float:left;
    margin-right: 15px;
}
input[type="checkbox"].ff-checkbox, input[type="radio"].ff-radio {
    display:block;
    -webkit-appearance: none;
    ms--appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    border-radius:500px;
    border:2px solid #a9aaad;
    background-color:#dedfe0;
    height:42px;
    width:42px;
    float:left;
    margin-right:20px;
   ...

JavaScript

// No JS Here