JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<label class="radio">
  <input type="radio" name="demo" value="1" checked />
  One
</label>
<label class="radio">
  <input type="radio" name="demo" value="2" />
  Two
</label>
<label class="radio">
  <input type="radio" name="demo" value="3" />
  Three
</label>

CSS

.radio {
  --size: 30px;
  --padding: calc(var(--size) + 1em);
  position: relative;
  margin: .25em;
  min-height: var(--size);
  padding-left: var(--padding);
  cursor: pointer;
}

.radio input {
  visibility: hidden;
  position: absolute;
}

input[type=radio]::after {
  --color-border: lightgray;
  --color-dot: var(--color-border);
  content: '';
  visibility: visible;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--padding) * -1);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: lightgray;
  background: radial-gradient(var(--color-dot) 0%, var(--color-dot) 40%,  white 40%);
  box-shadow: 0 0 0 1px var(--color-border);
  pointer-events: none;
}

input[type=radio]:checked::after {
  --color-dot: gray;
}