Pseudo elements are useful for changing the background colour of the checkbox and radio buttons. We can use :before and :after to change the colour or appearance of the checkboxes. It can all work with css styling.

Example:

<div class="container">
  <div class="section">
    <p>
      <input type="checkbox" id="b1" name="a">
      <label for="b1">First</label>
    </p>
    <p>
      <input type="checkbox" id="b2" name="a">
      <label for="b2">Second</label>
    </p>
    <p>
      <input type="checkbox" id="b3" name="a">
      <label for="b3">Third</label>
    </p>
  </div>
</div>

CSS:

.box {
  background: #cccccc;
  color: #fff;
  width: 350px;
  padding: 5px;
  margin: 5px auto;
}
p {
  margin: 5px 0;
  padding: 0;
}
input[type="checkbox"] {
  display: none;
}
label {
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  border: 1px solid #7f83a2;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
input[type="checkbox"]:checked + label:before {
  background: #3d404e;
  color: #666;
  content: "\2713";
  text-align: center;
}
input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}