Генератор CSS-чекбоксів

Що це за інструмент?

Стандартні браузерні чекбокси виглядають по-різному в кожному браузері, і їх складно перестилізувати напряму, оскільки їхній вигляд за замовчуванням малює операційна система, а не звичайний CSS. Стандартний обхідний шлях — візуально приховати нативний чекбокс і стилізувати сусідній елемент, керуючись станом :checked чекбокса — сам input лишається повністю функціональним і доступним, змінюється лише його вигляд.

Цей інструмент будує саме такий патерн для трьох поширених стилів чекбокса: заокруглена коробка з анімованою галочкою, перемикач-тумблер у стилі iOS і стиль заповненого кола (схожий на радіокнопку). Клацніть на чекбокс у попередньому перегляді, щоб побачити позначений стан, налаштуйте розмір і акцентний колір, потім скопіюйте CSS.

Джерело: Selectors Level 4, W3C — специфікація, що визначає псевдоклас :checked, на якому базується ця техніка.

Навіщо його використовувати?

• Живий, клікабельний попередній перегляд — перемкніть чекбокс, щоб побачити, як саме виглядають позначений і непозначений стани.
• Три відмінні, широко вживані стилі в одному інструменті: коробка з галочкою, перемикач-тумблер і заповнене коло.
• Базовий елемент лишається справжнім <input type="checkbox">, тож навігація з клавіатури, надсилання форми й скрінрідери продовжують працювати як зазвичай.
• Налаштовувані розмір і акцентний колір, згенеровані напряму в значення CSS, а не залишені як змінні для заповнення.
• Не потрібен ні іконковий шрифт, ні SVG-файл, ні зображення — галочка й повзунок намальовані звичайними CSS-рамками та псевдоелементами.
• Безкоштовно, працює у вашому браузері, без реєстрації.

Як користуватися

1. Оберіть стиль: заокруглена галочка, перемикач-тумблер чи заповнене коло.
2. Перетягніть повзунок розміру, щоб збільшити чи зменшити чекбокс.
3. Оберіть акцентний колір — він стане кольором фону й рамки в позначеному стані.
4. Клацніть на чекбокс у панелі попереднього перегляду, щоб переконатися, що обидва стани — позначений і непозначений — виглядають правильно.
5. Скопіюйте згенерований CSS у свою таблицю стилів і використовуйте його на будь-якому <input type="checkbox">, обгорнутому так само, як у розмітці попереднього перегляду.

Приклад

Введення

Стиль: заокруглена галочка · Розмір: 24px · Колір: помаранчевий

Результат

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Input чекбокса приховано візуально; видима коробка — це сусідній <span>, стилізований залежно від стану :checked input, з невеликою повернутою рамкою, намальованою як галочка після позначення.

Чому приховувати нативний чекбокс, а не видаляти його

Виникає спокуса пропустити справжній <input> і побудувати чекбокс лише зі стилізованого <div> з обробником кліку, але це безкоштовно втрачає підтримку клавіатури, надсилання форми й семантику для скрінрідерів. Патерн, що генерує цей інструмент, зберігає справжній input чекбокса в розмітці — лише візуально приховує його через opacity: 0 і перепозиціонування, — тож браузер продовжує сприймати його як справжній чекбокс у всьому, що має значення, поки сусідній елемент відповідає за видиму стилізацію.

Три стилі в двох словах

• Заокруглена галочка: знайомий патерн «квадрат із галочкою», найпоширеніший для полів форм, чекбоксів згоди й списків із множинним вибором.
• Перемикач-тумблер: сприймається як миттєве налаштування «увімкнено/вимкнено», а не поле форми — найкраще підходить для екранів переваг і налаштувань, а не для списків чекбоксів.
• Заповнене коло: мінімалістичний вигляд, схожий на радіокнопку, корисний, коли квадратна коробка виглядатиме візуально важкою поряд із заокругленими елементами інтерфейсу.

Узгодження з рештою вашого інтерфейсу

Згенерований акцентний колір впливає лише на позначений стан — оберіть той, що відповідає вашому бренду чи кольору кнопок, щоб чекбокс гармонійно вписувався в решту сторінки. Поєднайте його з тим самим border-radius, що використовується в інших місцях інтерфейсу, для більш цілісного вигляду.

→ Генератор border-radius · Піпетка кольору

Часті запитання