JSFiddle - React, Tailwind, and code Playground

by hambern

HTML

<h3>Är detta en fråga?</h3>

<input id="radio_1" value="1" type="radio" name="test">
<label for="radio_1">Radio 1</label>

<input id="radio_2" value="2" type="radio" name="test">
<label for="radio_2">Radio 2</label>

<input id="radio_3" value="3" type="radio" name="test">
<label for="radio_3">Radio 3</label>

CSS

/* Göm radioknappen */
input[type="radio"] {
  visibility: hidden;
}

/* Skapa en stilad label som visas i stället */
input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border: 1px solid #AAF;
  border-radius: 50%;
  margin-right: .5rem;
}

/* Stajla labeln beroende på om radioknappen är vald eller inte */
input[type="radio"]:checked + label:before {
  background-color: #AAF;
}