Стилизация чекбокса в HTML с помощью CSS: пример кода

Быстрый ответ

Для элегантного обновления скрывайте стандартный чекбокс и воспользуйтесь стилизованным элементом <label>:

<input type="checkbox" id="cb" hidden />
<label for="cb" class="custom-cb"></label>

.custom-cb {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ddd;
}

.custom-cb::before {
  content: '';
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
}

#cb:checked + .custom-cb::before { display: block; }

Повышаем ставки: продвинутые приемы кастомизации чекбоксов

Создаем искусство с помощью псевдоэлементов CSS

Откажитесь от обычного квадратика! Псевдоэлементы ::before и ::after позволят оформить кастомный чекбокс.

.custom-cb::after {
  content: '✔';
  display: none;
  color: green;
  font-size: 18px;
  position: absolute; top: 0; left: 4px;
}

#cb:checked + .custom-cb::after { display: block; }

Так, он появляется: зеленый галочка, когда чекбокс активен.

Подробнее об этом расскажет наш спикер на видео

Обеспечиваем интерактивность учетом стилей для различных состояний

Для сохранения взаимодействия с пользователем на высоком уровне добавьте стили для состояний :hover, :focus и :disabled.

.custom-cb:hover {
    box-shadow: 0 0 3px #666; /* Тени дают ощущение глубины */
}

.custom-cb:focus {
    outline: 2px solid blue; /* Это невозможно пропустить! */
}

#cb:disabled + .custom-cb {
    opacity: 0.5; /* Мягкое "исчезновение", если элемент недоступен */
}

Такие эффекты направляют пользователя и сообщают о текущем состоянии элемента.

Использование SVG для создания высококачественной графики

Используйте SVG для фоновых изображений, чтобы получить кристально чистые визуальные эффекты на любых устройствах.

input[type="checkbox"]:checked {
    background: url('checkmark.svg') no-repeat center center; /* Забудьте о растровой графике */
    background-size: contain; /* Проверьте, что размер изображения подходящий */
}

Благодаря использованию SVG, ваше изображение будет выглядеть прекрасно благодаря масштабированию.

Визуализация

Как по волшебству, CSS преобразует чекбокс в холст для творчества:

/* Обычные чекбоксы смотрятся скучно и вызывают дискомфорт */
input[type="checkbox"] {
    appearance: none;
    width: 25px;
    height: 25px;
    background: white;
    border: 1px solid #ccc;
}

/* Стилизованные чекбоксы выглядят волшебно */
input[type="checkbox"]:checked {
    background: url('checkmark.png') no-repeat center center;
    background-size: 20px 20px;
}

Благодаря этому творческому подходу, каждая отметка превращается в настоящее мастерство!

До стилизации: Холст ожидает творца 🎨🗹
После стилизации: Встречаем оригинальный чекбокс, который выделяется среди других ✔️

За рамками базовой настройки: погружение в кастомизацию

Повышение доступности

Используйте контрастность не менее 3:1 для лучшей видимости людьми с ограниченными возможностями зрения.

.custom-cb {
    border: 2px solid #555; /* Очевидно для любого человека */
}

Идеальная комбинация: кастомные чекбоксы с маркировкой, удобной для чтения с экрана.

<label for="cb" class="custom-cb">Опция</label>

Учет различного дизайна

Не все чекбоксы должны быть одинаковыми. Обеспечьте вариативность стилей, таких как .large, для чекбоксов различных размеров.

.custom-cb.large {
    width: 30px; height: 30px; /* Вот это размер! среди чекбоксов это великан! */
}

Учет особенностей разных браузеров

Гарантируйте совместимость с старыми версиями браузеров.

/* Поддержка IE8 и более ранних версий */
input[type="checkbox"] {
    /* Представьте, что это ваша машина времени для поддержки старых браузеров */
}

Успех в области кроссбраузерности достигается через постепенное улучшение.

Полезные материалы

1. CSS-Tricks
2. MDN
3. W3Schools
4. Codrops
5. DigitalOcean