Funny example where Emojis are set as radio buttons|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      strong {
        display: block;
        padding-left: 30px;
        margin-bottom: 10px;
      }
      label {
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .customize-radio label > input[type='radio'] {
        visibility: hidden;
        position: absolute;
      }
      .customize-radio label > input[type='radio'] ~ span {
        cursor: pointer;
        width: 31px;
        height: 31px;
        display: inline-block;
        background-size: 31px 31px;
        background-repeat: no-repeat;
        vertical-align: middle;
      }
      .happy {
        background-image: url("/uploads/media/default/0001/03/6819c91c6e19febea25c93b1923427482a6652cd.png");
      }
      .sad {
        background-image: url("/uploads/media/default/0001/03/626aae8381eddd269282a2c5871715e4303a93de.png");
      }
      .love {
        background-image: url("/uploads/media/default/0001/03/e4d188f2ee21a937a23e2d3e94f1aced2fa3c662.png");
      }
      .customize-radio label > input[type='radio']:checked ~ span.happy {
        background-image: url("/uploads/media/default/0001/03/67b31cf9b5e4a31624b2ffc00f483be0bef2511d.png");
      }
      .customize-radio label > input[type='radio']:checked ~ span.sad {
        background-image: url("/uploads/media/default/0001/03/1f0a4d909e8756a7cfff70a9125a2736740a3fc9.png");
      }
      .customize-radio label > input[type='radio']:checked ~ span.love {
        background-image: url("/uploads/media/default/0001/03/5bdfbcf51b653b5d8518b30b7876b43e352e3236.png");
      }
    </style>
  </head>
  <body>
    <form class="customize-radio">
      <strong>How do you feel today?</strong>
      <br>
      <label for="happy">
        <input type="radio" name="smiley" id="happy">
        <span class="happy"></span> HAPPY
      </label>
      <label for="sad">
        <input type="radio" name="smiley" id="sad">
        <span class="sad"></span> SAD
      </label>
      <label for="love">
        <input type="radio" name="smiley" id="love" checked>
        <span class="love"></span> LOVELY
      </label>
    </form>
  </body>
</html>