TryIt Editor v2.0 - Exemple d'une case à coher créée avec CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      input[type="checkbox"] {
        visibility: hidden;
      }
      .checkbox-example {
        width: 45px;
        height: 15px;
        background: #555;
        margin: 20px 10px;
        position: relative;
        border-radius: 5px;
      }
      .checkbox-example label {
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        transition: all 0.5s ease;
        cursor: pointer;
        position: absolute;
        top: -3px;
        left: -3px;
        background: #ccc;
      }
      .checkbox-example input[type="checkbox"]:checked + label {
        left: 27px;
      }
    </style>
  </head>
  <body>
    <h2>Comment styler une case à cocher</h2>
    <section>
      <div class="checkbox-example">
        <input type="checkbox" value="1" id="checkboxOneInput" />
        <label for="checkboxOneInput"></label>
      </div>
    </section>
  </body>
</html>