Коротко: чекбокс стилизуют свойством appearance: none, убирая системный вид, и задают свой: рамку, фон и галочку через ::before и :checked. Быстрый способ — accent-color, он меняет цвет стандартного чекбокса.
Способы стилизации
| Способ | Результат |
|---|---|
accent-color |
меняет цвет стандартного |
appearance: none |
полная стилизация |
| Скрытый input + label | кастомный вид любой формы |
Быстрый способ
input[type="checkbox"] {
accent-color: #003F8F;
width: 20px;
height: 20px;
}Одной строкой меняется цвет галочки — без сложной вёрстки. Этого достаточно в большинстве случаев.
Вкладки: полная стилизация
input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
}appearance: none убирает системный вид, дальше рисуем свой квадрат с рамкой и скруглением.
input[type="checkbox"]:checked {
background: #003F8F;
border-color: #003F8F;
}
input[type="checkbox"]:checked::before {
content: "✔";
color: #fff;
}:checked реагирует на установленную галочку. Так меняют фон и добавляют свою отметку.
input[type="checkbox"]:focus-visible {
outline: 2px solid #003F8F;
outline-offset: 2px;
}Фокус обязательно оставляют видимым — иначе пользователь с клавиатуры не увидит, на каком элементе находится.
input, используйте label, связанный с ним, и оставляйте видимый фокус.Практика: стилизовать чекбокс
- Решите, хватит ли
accent-color. - Для своей формы задайте
appearance: none. - Опишите рамку, фон и скругление.
- Добавьте вид для
:checked. - Оставьте видимый
:focus-visible. - Проверьте работу с клавиатуры и на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Старый вид | нет appearance: none |
добавить свойство |
| Галочка не видна | не задан content |
добавить в ::before |
| Не работает с клавиатуры | скрыт input без label | связать с label |
| Размер «прыгает» | нет фиксированных размеров | задать width/height |
| Не видно фокус | убран outline |
вернуть видимый фокус |
Проверьте себя
Вопросы и ответы
Нет. Часто достаточно accent-color — он подкрашивает стандартный чекбокс и сохраняет привычное поведение. Полная стилизация нужна, если дизайн требует особой формы.
Задайте width и height, например 20–24px. При кастомной стилизации размеры обязательны, иначе отметка будет выглядеть криво.
Если вы скрыли input через display: none, он перестаёт обрабатывать клики. Свяжите его с label через for и id — клик по подписи будет работать.
Он показывает рамку только при навигации с клавиатуры, а не при клике мышью. Так фокус видят те, кому он нужен, и не мешает остальным.
Итоги
- Цвет стандартного чекбокса меняет
accent-color. - Полная стилизация начинается с
appearance: none. - Вид отмечаемого задаёт
:checked. - Видимый фокус — обязательное условие доступности.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.