Checkboxes with css, no js

index.html

<div>
  <input type="checkbox" id="floep">
  <label for="floep">Floep</label>
</div>

<div>
  <input type="checkbox" id="flap" checked="checked">
  <label for="flap">Flap</label>
</div>

<div class="checkbox-is-right">
  <input type="checkbox" id="kip">
  <label for="kip">Kip</label>
</div>

<div class="checkbox-is-right">
  <input type="checkbox" id="haan" checked="checked">
  <label for="haan">Haan</label>
</div>

style.css

div {
 padding: 20px;
}

input[type=checkbox] {
  
  /* see h5bp */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

input[type=checkbox] + label {
  outline: 1px dotted lightgray;
  padding: 4px 4px 4px 24px;
  display: inline-block;
}

input[type=checkbox] + label:before {
  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: hotpink;  
  margin-left: -20px;
  margin-right: 4px;
  cursor: pointer;
}

input[type=checkbox]:checked + label:before {
  background-color: green;
}

input[type=checkbox]:focus + label:before,
input[type=checkbox]:active + label:before {
  box-shadow: 0 0 5px lightblue;

}

.checkbox-is-right > input[type=checkbox] + label {
    padding: 4px 24px 4px 4px; 
}

.checkbox-is-right > input[type=checkbox] + label:before {
  float: right;
  margin-right: -20px;
}

tuzvk.markdown

tuzvk

A Pen by Joost Kiens on CodePen.

License.