Example of a radio button with custom background image|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 action="/form/submit" method="POST">
      <h3>What Is Your Favorite Web Browser</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>What Is Your Favorite Search Engine</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>