Example of a custom checkbox with a border property used to set a different check-mark|CSS Snippet|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 20px;
      }
      /* Hide the default style of the checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* Create a custom checkbox */
      .mark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #999999;
      }
      /* Specify the background color for the checkbox while hovering */
      .box:hover input ~ .mark {
        background-color: #1c87c9;
      }
      /* Specify the background color for the checkbox when the checkbox is active */
      .box input:active ~ .mark {
        background-color: #ffcc00;
      }
      /* Specify the background color for the checkbox when it is checked */
      .box input:checked ~ .mark {
        background-color: #8ebf42;
      }
      /* Checkmark to be shown in checkbox */
      /* It will not be shown when not checked */
      .mark:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Display checkmark when checked */
      .box input:checked ~ .mark:after {
        display: block;
      }
      /* Styling the checkmark using webkit */
      /* Rotated the rectangle by 45 degree and showing only two borders to make it look like a tick mark */
      .box .mark:after {
        left: 5px;
        bottom: 5px;
        width: 6px;
        height: 6px;
        border: double #ffffff;
        border-width: 4px 4px 4px 4px;
      }
    </style>
  </head>
  <body>
    <h2>Custom checkbox</h2>
    <p>Select a checkbox to see how the colors are being changed:</p>
    <form>
      <label class="box">Stackdev
        <input type="checkbox">
        <span class="mark"></span>
      </label>
      <label class="box">W3docs
        <input type="checkbox" checked="checked">
        <span class="mark"></span>
      </label>
      <label class="box">Arcnet
        <input type="checkbox">
        <span class="mark"></span>
      </label>
    </form>
  </body>
</html>