<label><input type="radio" name="choice" value="1" checked><span class="radiobar"></span></label>
<label><input type="radio" name="choice" value="2"><span class="radiobar"></span></label>
<label><input type="radio" name="choice" value="3"><span class="radiobar"></span></label>
<label><input type="radio" name="choice" value="4"><span class="radiobar"></span></label>

input {
  display: none
}
.radiobar {
  display: inline-block;
  width: 40px;
  height: 10px;
  background-color: hsla(30,10%,80%);
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.7s;
}
input:checked + .radiobar {
  background-color: hsla(30,100%,60%);
  transition: background-color 0.7s;
}