An example of how to create custom checkboxes with CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Style a checkbox using CSS </title>
    <style>
      h1 {
        color: #8ebf42;
      }
      .script {
        display: block;
        position: relative;
        padding-left: 45px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 20px;
      }
      /* Hide the default checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* creating a custom checkbox based on demand */
      .w3docs {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: black;
      }
      /* specify the background color to be shown when hovering over checkbox */
      .script:hover input ~ .w3docs {
        background-color: orange;
      }
      /* specify the background color to be shown when checkbox is active */
      .script input:active ~ .w3docs {
        background-color: red;
      }
      /* specify the background color to be shown when checkbox is checked */
      .script input:checked ~ .w3docs {
        background-color: black;
      }
      /* checkmark to be shown in checkbox */
      /* It is not be shown when not checked */
      .w3docs:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* display checkmark when checked */
      .script input:checked ~ .w3docs:after {
        display: block;
      }
      /* styling the checkmark using webkit */
      /* creating a square to be the sign of checkmark */
      .script .w3docs:after {
        left: 6px;
        bottom: 5px;
        width: 6px;
        height: 6px;
        border: solid white;
        border-width: 4px 4px 4px 4px;
      }
    </style>
  </head>
  <body>
    <h1>Do you like W3Docs?</h1>
    <label class="script" style="color:black;">
      Yes
      <input type="checkbox">
      <span class="w3docs"></span>
    </label>
    <label class="script" style="color:black;">
      Yes Of course
      <input type="checkbox" checked="checked">
      <span class="w3docs"></span>
    </label>
  </body>
</html>