Создаем кастомные радио кнопки (radio button) на CSS и HTML

В недавней статье я показывал как можно сделать кастомный чекбокс на чистом CSS и HTML, а теперь пришло время для радио кнопок они же — radio buttons.

Принцип работы очень простой, также создаем label он будет выступать в роли кнопки, скрываем input и и добавляем рядом span элемент. Когда радио кнопка будет нажата, при помощи родственного CSS селектора (тильда) показываем псевдо элемент after у span.

Демо:

Код стилизованных radio buttons:

<div class="checkbox-wrapper">
  <label>
    Первый
    <input type="radio" class="modern-radio" value="1" name="a">
    <span></span>
  </label>
  <label>
    Второй
    <input type="radio" class="modern-radio" value="2" name="a">
    <span></span>
  </label>
</div>

Не забудь добавить атрибуты name для инпутов.

CSS Стили:

.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  сursor: pointer;
}

.checkbox-wrapper label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 17px;
  user-select: none;
}

.checkbox-wrapper span {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #c9c9c9;
  border-radius: 50%;
}


.checkbox-wrapper label input:checked ~ span {
  background-color: #fec901;
}


.checkbox-wrapper span:after {
  content: "";
  position: absolute;
  display: none;
}


.checkbox-wrapper label input:checked ~ span:after {
  display: block;
}


.checkbox-wrapper label span:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}