example of a checkbox with custom background image|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 5px;
        background: url("/uploads/media/default/0001/03/483349bb5ad90c3556217ac81ff8f0042c3d72fe.png") no-repeat;
      }
      .custom-checkbox:hover {
        background: url("/uploads/media/default/0001/03/c2c03c6386a75dab0f4787cea57b4a27b3261379.png") no-repeat;
      }
      .custom-checkbox.selected {
        background: url("/uploads/media/default/0001/03/499ee5a518caa7ef7f3367b69e368c791a9591f2.png") no-repeat;
      }
      .custom-checkbox input[type="checkbox"] {
        margin: 0;
        position: absolute;
        z-index: 2;
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* for older browsers */
        _noFocusLine: expression(this.hideFocus=true);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
      }
      /* Beautify the Form */
      form {
        margin: 20px;
      }
      label {
        display: block;
        padding: 3px 0;
      }
      input[type="submit"] {
        width: 100px;
        height: 30px;
        background: #eeeeee;
        border: 1px solid #999999;
        border-radius: 3px;
        margin-top: 20px;
        padding: 4px 10px;
        cursor: pointer;
        outline: none;
        font-weight: bold;
        color: #333333;
      }
      input[type="submit"]:hover {
        color: #fff;
        border-color: #eeeeee;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="POST">
      <h3>Choose Your Favorite Drinks</h3>
      <label>
        <input type="checkbox" name="drinks[]" value="americano" /> Americano
      </label>
      <label>
        <input type="checkbox" name="drinks[]" value="espresso" /> Espresso
      </label>
      <label>
        <input type="checkbox" name="drinks[]" value="iced-tea" /> Iced Tea
      </label>
      <label>
        <input type="checkbox" name="drinks[]" value="hot-chocolate" /> Hot Chocolate
      </label>
      <h3>Choose Your Favorite Cars</h3>
      <label>
        <input type="checkbox" name="car[]" value="jeep" /> Jeep
      </label>
      <label>
        <input type="checkbox" name="car[]" value="lada" /> Lada
      </label>
      <label>
        <input type="checkbox" name="car[]" value="audi" /> Audi
      </label>
      <label>
        <input type="checkbox" name="car[]" value="mercedes" /> Mercedes
      </label>
      <h3>Confirm?</h3>
      <label>
        <input type="checkbox" name="confirm" checked="checked" value="yes" /> Yes
      </label>
      <input type="submit" value="Submit" />
    </form>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      function customCheckbox(checkboxName) {
        var checkBox = $('input[name="' + checkboxName + '"]');
        $(checkBox)
          .each(function() {
            $(this)
              .wrap("<span class='custom-checkbox'></span>");
            if($(this)
              .is(':checked')) {
              $(this)
                .parent()
                .addClass("selected");
            }
          });
        $(checkBox)
          .click(function() {
            $(this)
              .parent()
              .toggleClass("selected");
          });
      }
      $(document)
        .ready(function() {
          customCheckbox("drinks[]");
          customCheckbox("car[]");
          customCheckbox("confirm");
        })
    </script>
  </body>
</html>