Styling HTML Checkboxes

by html5andblog @Codepen

by CJ Juarez

HTML

<input type="checkbox" name="checkbox-option" id="checkbox-button-opt-one" class="hide-checkbox" value="Option 1" checked>
<label for="checkbox-button-opt-one">Regular</label>
 
<input type="checkbox" name="checkbox-option" id="checkbox-button-opt-two" class="hide-checkbox" value="Option 2">
<label for="checkbox-button-opt-two">Large</label>
 
<input type="checkbox" name="checkbox-option" id="checkbox-button-opt-three" class="hide-checkbox" value="Option 3">
<label for="checkbox-button-opt-three">Jumbo</label>

CSS

.hide-checkbox + label {
display: block;
float: left;
width: 50px;
padding: 2px 0;
text-align: center;
background-color: #e74c3c;
font-family: 'Oswald', sans-serif;
color: #fff;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
 
.hide-checkbox:checked + label {
display: inline-block;
background-color: #2ecc71;
}

JavaScript

// Created for an Articles on:
// https://www.html5andbeyond.com/html-forms-styling-checkboxes-radio-buttons/

[].forEach.call( document.querySelectorAll('.hide-checkbox'), function(element) {
element.style.display = 'none';
});