Урок 48 із 104
46%
← Назад

Псевдоклас для відмічених елементів форм в HTML

Вивчаємо CSS-псевдоклас :checked для стилізації вибраних checkbox та radio елементів.

Псевдоклас :checked в HTML

Псевдоклас :checked використовується для вибору елементів форми, які зараз відмічені. Найчастіше він застосовується до checkbox і radio.

  • :checked працює тільки з елементами, які можна вибирати.
  • Для checkbox він спрацьовує після встановлення галочки.
  • Для radio він спрацьовує після вибору варіанта.
  • За допомогою :checked можна змінювати стилі інших елементів.

Приклад з checkbox

<label>
  <input type="checkbox">
  Погоджуюсь з правилами
</label>
input:checked {
  width: 20px;
  height: 20px;
}

Зміна стилю після вибору

<input type="checkbox" id="check">

<label for="check">
  Активувати
</label>
input:checked + label {
  color: green;
  font-weight: bold;
}

Приклад з radio

<input type="radio" name="color">
Червоний

<input type="radio" name="color">
Синій>
input[type="radio"]:checked {
  accent-color: blue;
}
❗ Важливо:

:checked часто використовують для створення красивих перемикачів, меню без JavaScript та інтерактивних елементів форми.

input:checked + label {
  color: green;
}

Практичне завдання

📌 Завдання:
  1. №1. Створіть checkbox.
  2. №2. За допомогою :checked змініть стиль тексту після вибору.
  3. №3. Перевірте результат при встановленні та знятті галочки.
<!-- Початковий код -->

<input type="checkbox">

<span>
  Текст
</span>
💡 Показати підказку

Селектор input:checked дозволяє вибрати тільки активний checkbox.

✅ Показати відповідь
<input type="checkbox" id="agree">

<label for="agree">
  Погоджуюсь
</label>