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>
      .custom-checkbox {
      width: 20px;
      height: 20px;
      display: inline-block;
      position: relative;
      z-index: 1;
      top: 5px;
      background: url("/uploads/media/default/0001/03/483349bb5ad90c3556217ac81ff8f0042c3d72fe.png") no-repeat;
      }
      .custom-checkbox:hover {
      background: url("/uploads/media/default/0001/03/c2c03c6386a75dab0f4787cea57b4a27b3261379.png") no-repeat;
      }
      .custom-checkbox.selected {
      background: url("/uploads/media/default/0001/03/499ee5a518caa7ef7f3367b69e368c791a9591f2.png") no-repeat;
      }
      .custom-checkbox input[type="checkbox"] {
      margin: 0;
      position: absolute;
      z-index: 2;            
      cursor: pointer;
      outline: none;
      opacity: 0;
      /* for older browsers */
      _noFocusLine: expression(this.hideFocus=true); 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -khtml-opacity: 0;
      -moz-opacity: 0;
      }
      /* Beautify the Form */
      form{
      margin: 20px;
      }
      label{
      display: block;
      padding: 3px 0;
      }
      input[type="submit"] {
      width: 100px;
      height: 30px;
      background: #eeeeee;
      border: 1px solid #999999;
      border-radius: 3px;
      margin-top: 20px;
      padding: 4px 10px;
      cursor: pointer;
      outline: none;
      font-weight: bold;
      color: #333333;
      }
      input[type="submit"]:hover {
      color: #fff;
      border-color: #eeeeee;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <form>
      <h3>Wählen Sie Ihre Lieblingsgetränke aus</h3>
      <label>
      <input type="checkbox" name="drinks[]" value="americano" /> 
      Americano
      </label>
      <label>
      <input type="checkbox" name="drinks[]" value="espresso" /> 
      Espresso
      </label>
      <label>
      <input type="checkbox" name="drinks[]" value="iced-tea" /> 
      Iced Tea
      </label>
      <label>
      <input type="checkbox" name="drinks[]" value="hot-chocolate" /> 
      Hot Chocolate
      </label>
      <h3>Wählen Sie Ihre Lieblingsautos aus</h3>
      <label>
      <input type="checkbox" name="car[]" value="jeep" /> 
      Jeep
      </label>
      <label>
      <input type="checkbox" name="car[]" value="lada" /> 
      Lada
      </label>
      <label>
      <input type="checkbox" name="car[]" value="audi" />
      Audi
      </label>
      <label>
      <input type="checkbox" name="car[]" value="mercedes" />
      Mercedes
      </label>
      <h3>Confirm?</h3>
      <label>
      <input type="checkbox" name="confirm" checked="checked" value="yes" /> 
      Yes
      </label>
      <input type="submit" value="Submit"/>
    </form>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      function customCheckbox(checkboxName){
          var checkBox = $('input[name="'+ checkboxName +'"]');
          $(checkBox).each(function(){
              $(this).wrap( "<span class='custom-checkbox'></span>" );
              if($(this).is(':checked')){
                  $(this).parent().addClass("selected");
              }
          });
          $(checkBox).click(function(){
              $(this).parent().toggleClass("selected");
          });
      }
      $(document).ready(function (){
          customCheckbox("drinks[]");
          customCheckbox("car[]");
          customCheckbox("confirm");
      })
    </script>
  </body>
</html>