Кастомні прапорці та радіокнопки

У цьому уроці ми розглянемо, як стилізувати елементи форм (checkbox та radio) за допомогою CSS. Особливу увагу приділимо червоним радіокнопкам з оригінального прикладу.

Базові прапорці та радіокнопки ↑ до змісту

Стандартні елементи:

Кастомна стилізація ↑ до змісту

Приховаємо нативні input та створимо власні за допомогою ::before. Демонстрація:

HTML-код прикладу ↑ до змісту

<form>
  <fieldset>
    <legend>Вибір дисциплін</legend>
    <div>
      <input class="custom-checkbox" id="math" type="checkbox">
      <label for="math">Математика</label>
    </div>
    <div>
      <input class="custom-radio" id="info" name="course" type="radio" value="info">
      <label for="info">Інформатика</label>
    </div>
  </fieldset>
</form>

Копіювати

CSS-код з докладними коментарями ↑ до змісту

/* Ховаємо стандартні input (але вони залишаються доступними для скрінрідерів) */
.custom-checkbox,
.custom-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Лейбл робимо гнучким, з курсором-вказівником */
.custom-checkbox + label,
.custom-radio + label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 5px 0;
}

/* Псевдоелемент before створює видимий маркер */
.custom-checkbox + label::before,
.custom-radio + label::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid #adb5bd;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.2s ease;
}

/* Чекбокс – квадрат */
.custom-checkbox + label::before {
  border-radius: 0.25em;
}

/* Радіо – коло */
.custom-radio + label::before {
  border-radius: 50%;
}

/* Стан "вибрано" для чекбокса: фон та галочка (SVG) */
.custom-checkbox:checked + label::before {
  border-color: #6a11cb;
  background-color: #6a11cb;
  background-image: url("data:image/svg+xml,..."); /* SVG галочки */
}

/* ЧЕРВОНА РАДІОКНОПКА (як у оригінальному прикладі) */
/* Коли радіо вибрана, вона стає великою (50x50), з червоним фоном та обідком */
.custom-radio:checked + label::before {
  width: 50px;
  height: 50px;
  border-color: #ff0000;
  background-color: #ff0000;
  outline: 5px solid red;
  border-radius: 40px;
  background-image: url('3.png');  /* можна замінити на власну іконку */
  background-size: cover;
}

/* Фокус на радіокнопці: синій/фіолетовий контур із збільшенням */
.custom-radio:focus + label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  width: 50px;
  height: 50px;
  border-color: #ff00ff;
  background-color: #ff00ff;
  outline: 5px solid navy;
  border-radius: 40px;
}

/* Hover-ефект для обох типів */
.custom-checkbox:not(:disabled):hover + label::before,
.custom-radio:not(:disabled):hover + label::before {
  border-color: #6a11cb;
}

/* Вимкнені елементи сірі та неклікабельні */
.custom-checkbox:disabled + label::before,
.custom-radio:disabled + label::before {
  background-color: #e9ecef;
  cursor: not-allowed;
}

Копіювати