<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Radio buttons styled</title>
  <style>
    input[type="radio"] {
      appearance: none;
    }

    input[type="radio"] {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      border: 2px solid gray;
      /* Adjusts the position of the checkboxes on the text baseline */
      vertical-align: -2px;
      outline: none;
    }

    input[type="radio"]::before {
      display: block;
      content: " ";
      width: 10px;
      height: 10px;
      border-radius: 6px;
      background-color: red;
      font-size: 1.2em;
      transform: translate(3px, 3px) scale(0);
      transform-origin: center;
      transition: all 0.3s ease-in;
    }

    input[type="radio"]:checked::before {
      transform: translate(3px, 3px) scale(1);
      transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
    }
  </style>
</head>

<body>
  <form>
    <fieldset>
      <legend>Choose your favourite fruit</legend>

      <p>
        <label>
          <input type="radio" name="fruit" value="cherry">
          Cherry
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="fruit" value="banana">
          Banana
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="fruit" value="strawberry">
          Strawberry
        </label>
      </p>
    </fieldset>
  </form>

</body>

</html>
input[type="radio"]::before {
 display: block;
 content: " ";
 width: 10px;
 height: 10px;
 border-radius: 6px;
 background-color: red;
 font-size: 1.2em;
 transform: translate(3px, 3px) scale(0);
 transform-origin: center;
 transition: all 0.3s ease-in;
}

input[type="radio"]:checked::before {
 transform: translate(3px, 3px) scale(1);
 transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.