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> 
      .box { 
      display: block; 
      position: relative; 
      padding-left: 35px; 
      margin-bottom: 15px; 
      cursor: pointer; 
      font-size: 20px; 
      }   
      /* Hide the default style of the checkbox */ 
      input[type=checkbox] { 
      visibility: hidden; 
      } 
      /* Create a custom checkbox */ 
      .mark { 
      position: absolute; 
      top: 0; 
      left: 0; 
      height: 25px; 
      width: 25px; 
      background-color: #999999; 
      }     
      /* Specify the background color for the checkbox while hovering */ 
      .box:hover input + .mark { 
      background-color: #1c87c9; 
      }   
      /* Specify the background color for the checkbox when the checkbox is active */ 
      .box input:active + .mark { 
      background-color: #ffcc00; 
      } 
      /* Specify the background color for the checkbox when it is checked */ 
      .box input:checked + .mark { 
      background-color: #8ebf42; 
      } 
      /* Checkmark to be shown in checkbox */ 
      /* It will not be shown when not checked */ 
      .mark:after { 
      content: ""; 
      position: absolute; 
      display: none; 
      } 
      /* Display checkmark when checked */ 
      .box input:checked + .mark:after { 
      display: block; 
      }
      /* Styling the checkmark using webkit */ 
      /* Rotated the rectangle by 45 degree and showing only two border to make it look like a tick mark */ 
      .box .mark:after { 
      left: 8px; 
      bottom: 5px; 
      width: 6px; 
      height: 12px; 
      border: solid #eee; 
      border-width: 0 4px 4px 0; 
      -webkit-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      transform: rotate(45deg); 
      } 
    </style>
  </head>
  <body>
    <h2>Custom checkboxes</h2>
    <p>Aktivieren Sie eine Checkbox, um zu sehen, wie die Farben geändert werden:</p>
    <form>
      <label class="box">Stackdev
      <input type="checkbox"> 
      <span class="mark"></span> 
      </label> 
      <label class="box">W3docs
      <input type="checkbox" checked="checked"> 
      <span class="mark"></span> 
      </label> 
      <label class="box">Arcnet
      <input type="checkbox"> 
      <span class="mark"></span> 
      </label> 
    </form>
  </body>
</html>