Example of illustrated checkboxes|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .exampleOne {
        width: 28px;
        height: 28px;
        position: relative;
        margin: 20px auto;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .exampleOne label {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 4px;
        left: 4px;
        cursor: pointer;
        background: linear-gradient(top, #222 0%, #45484d 100%);
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
      }
      .exampleOne label:after {
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        top: 2px;
        left: 2px;
        background: #27ae60;
        background: linear-gradient(top, #27ae60 0%, #145b32 100%);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
        opacity: 0;
      }
      .exampleOne label:hover::after {
        opacity: 0.3;
      }
      .exampleOne input[type=checkbox] {
        visibility: hidden;
      }
      .exampleOne input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      .exampleTwo {
        width: 20px;
        position: relative;
        margin: 20px auto;
      }
      .exampleTwo label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(top, #222 0%, #45484d 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4);
      }
      .exampleTwo label:after {
        content: '';
        width: 9px;
        height: 5px;
        position: absolute;
        top: 4px;
        left: 4px;
        border: 3px solid #fcfff4;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        transform: rotate(-45deg);
      }
      .exampleTwo label:hover::after {
        opacity: 0.3;
      }
      .exampleTwo input[type=checkbox] {
        visibility: hidden;
      }
      .exampleTwo input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      .example {
        width: 20px;
        position: relative;
        margin: 20px auto;
      }
      .example label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label:after {
        content: '';
        width: 9px;
        height: 5px;
        position: absolute;
        top: 4px;
        left: 4px;
        border: 3px solid #333;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        transform: rotate(-45deg);
      }
      .example label:hover::after {
        opacity: 0.5;
      }
      .example input[type=checkbox] {
        visibility: hidden;
      }
      .example input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
      }
      body h1,
      body h2,
      body p {
        color: #333;
        font-size: 30px;
        text-align: center;
        margin: 20px 0 0 0;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000;
      }
      body p {
        font-size: 14px;
        text-align: center;
        display: block;
        margin-bottom: 50px;
      }
      body .ondisplay {
        text-align: center;
        padding: 20px 0;
      }
      body .ondisplay section {
        width: 150px;
        height: 80px;
        background: #555;
        display: inline-block;
        position: relative;
        text-align: center;
        margin-top: 5px;
        border: 1px solid gray;
        border-radius: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      body .ondisplay section:after {
        /*         visibility: hidden; */
        content: attr(title);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000;
      }
    </style>
  </head>
  <body>
    <h2>Custom checkboxes</h2>
    <p>Select a checkbox to see the effect:</p>
    <div class="ondisplay">
      <section title="exampleOne">
        <div class="exampleOne">
          <input type="checkbox" value="None" id="exampleOne" name="check" checked />
          <label for="exampleOne"></label>
        </div>
      </section>
      <section title="exampleTwo">
        <div class="exampleTwo">
          <input type="checkbox" value="None" id="exampleTwo" name="check" checked />
          <label for="exampleTwo"></label>
        </div>
      </section>
      <section title="example">
        <div class="example">
          <input type="checkbox" value="None" id="example" name="check" checked />
          <label for="example"></label>
        </div>
      </section>
    </div>
  </body>
</html>