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> 
      /* .exampleOne */
      .exampleOne {
      width: 50px;
      height: 10px;
      background: #333;
      margin: 20px auto;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleOne label {
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      top: -3px;
      left: -3px;
      cursor: pointer;
      background: #fcfff4;
      background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease;
      }
      .exampleOne input[type=checkbox] {
      visibility: hidden;
      }
      .exampleOne input[type=checkbox]:checked + label {
      left: 37px;
      }
      /* end .exampleOne */
      /* .exampleTwo */
      .exampleTwo {
      width: 80px;
      height: 30px;
      background: #333;
      margin: 20px auto;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleTwo:after {
      content: '';
      position: absolute;
      top: 14px;
      left: 14px;
      height: 2px;
      width: 52px;
      background: #111;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleTwo label {
      display: block;
      width: 22px;
      height: 22px;
      cursor: pointer;
      position: absolute;
      top: 4px;
      z-index: 1;
      left: 4px;
      background: #fcfff4;
      border-radius: 50px;
      transition: all 0.4s ease;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      }
      .exampleTwo label:after {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      top: 6px;
      left: 6px;
      background: #333;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 1), 0px 1px 0px rgba(255, 255, 255, 0.9);
      }
      .exampleTwo input[type=checkbox] {
      visibility: hidden;
      }
      .exampleTwo input[type=checkbox]:checked + label {
      left: 54px;
      }
      .exampleTwo input[type=checkbox]:checked + label:after {
      background: #27ae60;
      /*activeColor*/
      }
      /* end .exampleTwo */
      /* .exampleThree */
      .exampleThree {
      width: 80px;
      height: 26px;
      background: #333;
      margin: 20px auto;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleThree:after {
      content: 'OFF';
      color: #000;
      position: absolute;
      right: 10px;
      z-index: 0;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      text-shadow: 1px 1px 0px rgba(255, 255, 255, .15);
      }
      .exampleThree:before {
      content: 'ON';
      color: #27ae60;
      position: absolute;
      left: 10px;
      z-index: 0;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      }
      .exampleThree label {
      display: block;
      width: 34px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 1;
      background: #fcfff4;
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      transition: all 0.4s ease;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      }
      .exampleThree input[type=checkbox] {
      visibility: hidden;
      }
      .exampleThree input[type=checkbox]:checked + label {
      left: 43px;
      }
      /* end .exampleThree */
      /* .example */
      .example {
      width: 28px;
      height: 28px;
      position: relative;
      margin: 20px auto;
      background: #fcfff4;
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      left: 4px;
      top: 4px;
      background: linear-gradient(top, #222 0%, #45484d 100%);
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
      }
      .example label:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      background: #27ae60;
      background: linear-gradient(top, #27ae60 0%, #145b32 100%);
      opacity: 0;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label:hover::after {
      opacity: 0.3;
      }
      .example input[type=checkbox] {
      visibility: hidden;
      }
      .example input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      /* end .example */
      * {
      box-sizing: border-box;
      }
      body {
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      }
      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>Benutzerdefinierte Checkbox</h2>
    <p>>Wählen Sie die Checkbox, um den Effekt zu sehen:</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="exampleThree">
        <div class="exampleThree">  
          <input type="checkbox" value="None" id="exampleThree" name="check" checked />
          <label for="exampleThree"></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>