logoalt Hacker News

going_northtoday at 8:42 AM0 repliesview on HN

You can get a lot closer with only small modifications:

    input[type="radio"] {
      appearance: none;
      margin: 0;
      width: 25px;
      height: 25px;
      background: white;
      border-radius: 50%;
      display: inline-grid;
      place-content: center;
      box-shadow: 0 2px 10px color(display-p3 0 0 0/0.5);

      &::before {
        content: "";
        width: 11px;
        height: 11px;
        border-radius: 50%;
      }

      &:checked::before {
        background: color(display-p3 0.383 0.317 0.702);
      }
    }
Here's a link to a codepen so you can see what it looks like without rendering it yourself: https://codepen.io/erikaja/pen/RNRVMyB