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

Время на прочтение: 2 мин.

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

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

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

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

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

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

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

Чекбокс не запускает действие сразу. Для этого, обычно, необходимо нажать на кнопку. Для включение какого-либо режима сразу рекомендуется использование тугла(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. Спасибо за внимание!

2 0 0 0 0 0

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

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

Стилизация элементов checkbox и radio button на CSS3

Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажем, как можно легко и просто заменить стандартные элементы

checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3.

HTML разметка

Расположим элементы на странице: 


	
<!-- Элемент флажок -->
<input type="checkbox" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

<!-- Элемент переключатель -->
<input type="radio" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>

Здесь ничего особенного, каждому элементу задаем

id и name, также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label, вставляем span. Для чего именно, написано ниже.

Правила CSS

Сейчас начинается самое интересное. Разберем создание только элемента «флажок», «переключатель» формируется аналогичным путем. Первое что мы делаем, это скрываем стандартный флажок из виду: 


	
input[type="checkbox"] {
    display:none;
}

Теперь, становится ясно, для чего нужен элемент

span. Вместо скрытого стандартного флажка организуем новый, используя span: 


	
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

С помощью CSS селектора выбираем все span внутри тега label, которые принадлежат элементам input с типом >checkbox (т.

е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):

Для выбранных span задаем высоту и ширину в 19px, и располагаем фоновое изображение.

Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked). Для этого просто смещаем данное изображение влево на 19px: 


	
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо

type=»checkbox» используется type=»radio».

  • 2.89
  • 1
  • 2
  • 3
  • 4
  • 5

Голосов: 1166 | Просмотров: 11666

Стиль флажка CSS | Как работает стиль флажка CSS? Примеры

При разработке страниц в HTML может потребоваться изменить стиль всех или некоторых элементов страницы, таких как флажок, переключатель и т. д. Стиль флажка CSS — это стиль, который применяется в вашем компоненте флажка HTML-кода путем настройки различных значений свойств для достижения богатого современного вида вашего HTML-дизайна пользовательского интерфейса, который может быть более привлекательным для конечных пользователей, что в конечном итоге увеличивает вовлеченность вашей веб-страницы. .

Синтаксис:

Не существует определенного синтаксиса для стиля флажка CSS, поскольку это общие параметры CSS, которые необходимо изменить в соответствии с вашими требованиями. Вы можете использовать кодирование CSS внутри тега