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-radio {
      width: 20px;
      height: 20px;
      display: inline-block;
      position: relative;
      z-index: 1;
      top: 5px;
      background: url("/uploads/media/default/0001/03/b3bdb04777eb889cfdfe1e44c0fca7b6896cc9b5.png") no-repeat;
      }
      .custom-radio:hover {            
      background: url("/uploads/media/default/0001/03/27b06624c37686ed1a1a673ac230366a91c9cfba.png") no-repeat;
      }
      .custom-radio.selected {
      background: url("/uploads/media/default/0001/03/66199bdb5884a7f502448ee44acfb48887c889bf.png") no-repeat;
      }
      .custom-radio input[type="radio"]{
      margin: 1px;
      position: absolute;
      z-index: 2;            
      cursor: pointer;
      outline: none;
      opacity: 0;
      /* CSS hacks 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: 2px 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: #ffcc00;
      }
    </style>
  </head>
  <body>
    <form>
      <h3>Ihr Lieblings-Webbrowser</h3>
      <label><input type="radio" name="browser" value="chrome"> Chrome</label>
      <label><input type="radio" name="browser" value="firefox"> Firefox</label>  
      <label><input type="radio" name="browser" value="opera"> Opera</label>
      <h3>Ihre Lieblings-Suchmaschine</h3>
      <label><input type="radio" name="search-engine" value="google"> Google</label>
      <label><input type="radio" name="search-engine" value="yahoo"> Yahoo</label>
      <label><input type="radio" name="search-engine" value="bing"> Bing</label>      
      <h3>Confirm?</h3>
      <label><input type="radio" name="confirm" checked="checked" value="yes"> Yes</label>
      <label><input type="radio" name="confirm" value="no"> No</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 customRadio(radioName){
          var radioButton = $('input[name="'+ radioName +'"]');
          $(radioButton).each(function(){
              $(this).wrap( "<span class='custom-radio'></span>" );
              if($(this).is(':checked')){
                  $(this).parent().addClass("selected");
              }
          });
          $(radioButton).click(function(){
              if($(this).is(':checked')){
                  $(this).parent().addClass("selected");
              }
              $(radioButton).not(this).each(function(){
                  $(this).parent().removeClass("selected");
              });
          });
      }
      $(document).ready(function (){
          customRadio("browser");
          customRadio("search-engine");            
          customRadio("confirm");
      })
    </script>
  </body>
</html>