JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<div><input id=r1 type=radio name=r1 checked> <label for=r1>Option 1</label></div>
<div><input id=r2 type=radio name=r1> <label for=r2>Option 2</label></div>
<div><label for=r3><input id=r3 type=radio name=r1> Option 3</label></div>
<div><input id=r4 type=radio name=r1> <label for=r4>Option 4</label></div>
<div><input id=r5 type=radio name=r1> <label for=r5>Option 5</label></div>

CSS

input[type=radio]
{
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: solid red 2px;
  box-sizing: border-box;
  vertical-align: middle;
  
  align-items: center;
  justify-content: center;
}

input[type=radio]:checked:after
{
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  box-sizing: border-box;
  background: #000;
  background-image: radial-gradient(circle at 75% 75%, rgba(246,3,3,1) 0%, rgba(35,255,8,1) 28%, rgba(7,69,255,1) 51%, rgba(249,255,3,1) 75%, rgba(255,0,228,0.9920343137254902) 100%);
  border: solid black 0.15rem;
}


input[type=radio]:focus
{
  box-shadow: 0 0 0 0.25rem rgba(0,0,255, 0.25);
}