Styling HTML Checkboxes

index.html

<div>
  <input type="checkbox" name="checkbox-option" id="chk-opt-1" class="hide-checkbox" value="opt1" checked>
<label for="chk-opt-1">.com</label>

<input type="checkbox" name="checkbox-option" id="chk-opt-2" class="hide-checkbox" value="opt1" checked>
<label for="chk-opt-2">.org</label>

<input type="checkbox" name="checkbox-option" id="chk-opt-3" class="hide-checkbox" value="opt3" checked>
<label for="chk-opt-3">.net</label>

<input type="checkbox" name="checkbox-option" id="chk-opt-4" class="hide-checkbox" value="opt4" checked>
<label for="chk-opt-4">.es</label>
</div>
<div>
  <input type="checkbox" name="checkbox-option" id="chk-opt-5" class="hide-checkbox" value="opt5" checked>
<label for="chk-opt-5">.me</label>

<input type="checkbox" name="checkbox-option" id="chk-opt-6" class="hide-checkbox" value="opt6" checked>
<label for="chk-opt-6">.biz</label>

<input type="checkbox" name="checkbox-option" id="chk-opt-7" class="hide-checkbox" value="opt7" checked>
<label for="chk-opt-7">.co</label>

<input type="checkbox" name="checkbox-option" id="chk-opt-8" class="hide-checkbox" value="opt8" checked>
<label for="chk-opt-8">.cc</label>
</div>

script.js

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

style.css

.hide-checkbox + label {
display: inline-block;
width: 150px;
padding: 0.3rem 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;
}

styles

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />

styling-html-checkboxes.markdown

Styling HTML Checkboxes

Quick Example of Styling Checkboxes using Label Elements.

A Pen by Netzulo.com on CodePen.

License.