<label class="label">
  <input class="input" name="radio" type="radio" />
  <span class="radiobutton">Вариант 1</span>
</label>

<label class="label">
  <input class="input" name="radio" type="radio" />
  <span class="radiobutton">Вариант 2</span>
</label>

<label class="label">
  <input class="input" name="radio" type="radio" />
  <span class="radiobutton">Вариант 3</span>
</label>
.label {
  display: block;
  padding: 10px;
}

.input {
  display: none;
  
  &:checked ~ .radiobutton:before {
    background-color: orange;
  }
}

.radiobutton {
  position: relative;
  padding-left: 25px;
  
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #cacaca;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.