Wie kann man benutzerdefinierte Checkbox und benutzerdefinierten Radiobutton erstellen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      strong{
      display: block;
      padding-left: 30px;
      margin-bottom: 10px;
      }
      label {
      display: block;
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      }
      .customize-radio label > input[type = 'radio'] {
      visibility: hidden;
      position: absolute;
      }
      .customize-radio label > input[type = 'radio'] ~ span {
      cursor: pointer;
      width: 31px;
      height: 31px;
      display: inline-block;
      background-size: 31px 31px;
      background-repeat: no-repeat;
      vertical-align: middle;
      }
      .happy {
      background-image: url("/uploads/media/default/0001/03/6819c91c6e19febea25c93b1923427482a6652cd.png");
      }
      .sad {
      background-image: url("/uploads/media/default/0001/03/626aae8381eddd269282a2c5871715e4303a93de.png");
      }
      .love {
      background-image: url("/uploads/media/default/0001/03/e4d188f2ee21a937a23e2d3e94f1aced2fa3c662.png");
      }
      .customize-radio label > input[type = 'radio']:checked ~ span.happy {
      background-image: url("/uploads/media/default/0001/03/67b31cf9b5e4a31624b2ffc00f483be0bef2511d.png");
      }
      .customize-radio label > input[type = 'radio']:checked ~ span.sad {
      background-image: url("/uploads/media/default/0001/03/1f0a4d909e8756a7cfff70a9125a2736740a3fc9.png");
      }
      .customize-radio label > input[type = 'radio']:checked ~ span.love {
      background-image: url("/uploads/media/default/0001/03/5bdfbcf51b653b5d8518b30b7876b43e352e3236.png");
      }
    </style>
  </head>
  <body>
    <form class="customize-radio">
      <strong>Wie geht es Ihnen heute?</strong><br>
      <label for="happy">
      <input type="radio" name="smiley" id="happy">
      <span class="happy"></span>
      GLÜCKLICH
      </label>
      <label for="sad">
      <input type="radio" name="smiley" id="sad">
      <span class="sad"></span>
      TRAURIG
      </label>
      <label for="love">
      <input type="radio" name="smiley" id="love" checked>
      <span class="love"></span>
      GROSSARTIG
      </label>
    </form>
  </body>
</html>