Styled checkboxes that are accessible and dont rely upon another library fiddle

Checkboxes that can be custom styles

by Max Poshusta

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<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="http://jsfiddle.net/maxshuty/qxakwcy3/" target="_blank">Are you already using FontAwesome, Glyphicons, etc.? Check this out!</a>

<br>
<br>

<a href="https://jsfiddle.net/maxshuty/2bgknq68/" target="_blank">Want radio buttons too?</a>

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

CSS

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

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent;
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}


/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

JavaScript

// From my answer here: https://stackoverflow.com/a/58570835/4826740

// With help courtesy of this answer:
// https://stackoverflow.com/a/32876109/4826740

// Obviously you'll have to add your own CSS or glyph for the "checkmark", but this fiddle does not rely upon
// FontAwesome, Glyphicons, etc. in it's current state.

// See this fiddle for an example with a checkmark icon: http://jsfiddle.net/maxshuty/qxakwcy3/