Styled checkboxes that are accessible fiddle

Checkboxes that can be custom styles

by Max Poshusta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<label>
  <input type="checkbox">
  <span aria-label="Try using tab and space">Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span aria-label="Disabled Checked Checkbox">Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span aria-label="Disabled Checkbox">Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span aria-label="Normal Checkbox">Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span aria-label="Another normal Checkbox">Another Normal Checkbox</span>
</label>

<br>
<br>
<a href="https://stackoverflow.com/a/32876109/4826740" target="_blank">Courtesy of this answer</a>

<br>
<br>

<h2>
I emplore you to check out my other (much better) fiddles<br> that don't rely upon external libraries here:
</h2>

<a href="https://jsfiddle.net/maxshuty/2cs0dj54/" target="_blank">Custom checkboxes</a> and <a href="https://jsfiddle.net/maxshuty/2bgknq68/27/" target="_blank">radio buttons</a>

CSS

input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

input[type="checkbox"]+span {
    font: 16pt sans-serif;
    color: #000;
}

input[type="checkbox"]+span:before {
    font: 16pt FontAwesome;
    content: '\00f096';
    display: inline-block;
    width: 16pt;
    padding: 2px 0 0 3px;
    margin-right: 0.5em;
}

input[type="checkbox"]:checked+span:before {
    content: '\00f046';
}

input[type="checkbox"]:focus+span:before {
    outline: 1px dotted #aaa;
}

input[type="checkbox"]:disabled+span {
    color: #999;
}

input[type="checkbox"]:not(:disabled)+span:hover:before {
    text-shadow: 0 1px 2px #77F;
}

/* Styles for this fiddle only */
h2 ~ a {
  font-size: 20px;
}

JavaScript

// Courtesy of this answer:
// https://stackoverflow.com/a/32876109/4826740

// Dont want to use FontAwesome? Check out my other fiddle: http://jsfiddle.net/maxshuty/2cs0dj54/