+7(982) 597-7179

Использование и стилизация input checkbox

Время на прочтение: 2 мин.
чекбоксы

В данной статье мы поговорим об использовании и стилизации элементов checkbox(далее чекбоксов) на вашем сайте. При верстке сайта разработчики сталкиваются с проблемой стилизации чекбоксов, многие так же используют их не там где надо. Давайте познакомимся с этим элементов поближе.

Что такое чекбокс?

Checkbox с английского переводится как «флажок». Это элемент пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. В включенном состоянии внутри чекбокса отображается галочка ✓, иногда можно использовать крестик. По традиции чекбокс имеет квадратную форму.

В html формах для вывода чекбокса используется код: <input type= "checkbox">

Применение чекбоксов

Чекбоксы применяют:

  • для выбора элементов из списка. Например, выбор массового действия.
  • Для выбора параметров. Например, включение уведомлений.
  • Подтверждение действий. Например, согласие на обработку персональных данных.

Чекбокс не запускает действие сразу. Для этого, обычно, необходимо нажать на кнопку. Для включение какого-либо режима сразу рекомендуется использование тугла(toogle):

Элемент  toogle
Элемент toogle

Некоторые разработчики неправильно применяют чекбоксы в интерфейсе. Например, при выборе из нескольких параметров следует использовать тип radio:

Правильное использование чекбоксов
Правильное применение checkbox

Создание стандартных чекбоксов

Ниже продемонстрирован пример создания стандартных чекбоксов.

See the Pen Untitled by Токмаков Александр (@calliko) on CodePen.

Стилизация чекбоксов

Чекбоксы можно стилизовать под ваши нужды. Ниже приведен пример стилизации чекбоксов с помощью css, без использования js

See the Pen checkbox style by Токмаков Александр (@calliko) on CodePen.

Пример тугла (переключателя):

See the Pen toggle by Токмаков Александр (@calliko) on CodePen.

Данные переключатели советую использовать когда необходимо выполнить действие моментально. Например, включение темного режима сайта.

Советы по использованию чекбоксов

  1. Используйте стандартный вид чекбокса. Пользователи привыкли к квадратной форме чекбоксов и галочкам внутри них. Сделав их круглыми, вы можете запутать пользователей. Если использовать крестик, то тоже не понятно выбор сделан или наоборот — отмена.
  2. Располагайте чекбоксы правильно. Лучший вариант в столбик друг под другом. Иногда можно их ставить в ряд, но нижние чекбоксы должны быть строго друг под другом.
  3. Используйте понятные утвердительные подписи к чекбоксам. Избегайте отрицательных подписей, например, «Не присылать мне подписку».
  4. Не делайте размер чекбокса слишком маленьким или слишком большим.

А ещё у нас есть статья о стилизации select. Спасибо за внимание!


Читайте также:

Приглашаем поучаствовать в обсуждении статьи:

Комментариев 0

Войти через: