<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>含样式的收音机按钮</title>
  <style>
    input[type="radio"] {
      -webkit-appearance: none;
      appearance: none;
    }

    input[type="radio"] {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      border: 2px solid gray;
      /* 调节收音机按钮文字的垂直位置。 */
      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>选择你最喜欢的水果</legend>

      <p>
        <label>
          <input type="radio" name="fruit" value="cherry">
          樱桃
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="fruit" value="banana">
          香蕉
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="fruit" value="strawberry">
          草莓
        </label>
      </p>
    </fieldset>
  </form>
</body>

</html>
