Как сделать чекбокс на HTML/CSS
Сегодня вы узнаете как сделать чекбокс на HTML и добавить ему CSS стилей для лучшей совместимости с дизайном сайта.
Демонстрация
Чекбокс на HTML
Создадим блок с четырьмя чекбоксами, первый будет отмечен – с галочкой. Каждый чекбокс будет заключен в тег label, внутри которого поле для ввода, текст и элемент span, который предстоит стилизовать.
Тег label служит контейнером для каждого чекбокса, для наглядности я временно задал красную рамку тегу label. Когда мало опыта, это хороший способ, увидеть границы любого тега, чтобы не действовать вслепую.
CSS для чекбокс
Строчный тег label, заменим на блочный (display: block), чтобы чекбоксы, встали друг под другом, user-select: none – запрещает пользователю выделять элемент.
.container display: block;
user-select: none;
>
Этот код прячет дефолтные браузерные стили для чекбокса. Мы делаем элемент полностью прозрачным за счет opacity, width и height с нулевым значением и на их месте, задаем кастомные стили для чекбокса.
.container input opacity: 0;
height: 0;
width: 0;
>
Создаем кастомные чекбоксы. Меняем размеры и цвет фона.
.checkmark height: 23px;
width: 22px;
background-color: #eec321;
>
При наведении курсора, делаем цвет фона немного темнее.
.container:hover input ~ .checkmark background-color: #ccc678;
>
Для отмеченного чекбокса, задаем другой цвет для фона.
.container input:checked ~ .checkmark background-color: #2196f3;
>
Прячем галочку для не отмеченных чекбоксов, применив псевдоэлемент after.
.checkmark:after content: «»;
position: absolute;
display: none;
>
Делаем видимой галочку, только для отмеченных чекбоксов.
.container input:checked ~ .checkmark:after display: block;
>
Рисуем и стилизуем галочку. Галочку мы рисуем на чистом CSS. Изобразим прямоугольник с белой рамкой, у двух сторон прямоугольника, рамки нет (нулевая ширина), получается прямоугольный угол, мы его поворачиваем на 45 градусов и получается галочка.
.container .checkmark:after left: 8px;
top: 6px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
>
Посмотреть код целиком можно на Codepen
Создано 19.11.2018 10:19:41
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
HTML коды символов Галочки
Ниже представлена таблица разбитая по категориям с различными html кодами для символов.
| Обозначение | HTML код символа | Название |
| ✅ | ✅ | Жирная незакрашенная галочка |
| ✓ | ✓ | Символ Галочка обычная |
| ✔ | ✔ | Символ Галочка жирная |
| ☑ | ☑ | Символ галочка в квадрате |
Основные разделы
- Главная
- Партнерские программы
- Рейтинг партнерских программ
- Статьи про SEO
- Термины SEO
- Описание бирж
- HTML-уроки и советы
- CSS-уроки
- Биткоины
- PHP-уроки
- Бинарные опционы
- Социальные сети
- Обзоры систем
- Все про CMS
- Реклама в интернете
- Продвижение сайта
- Аудит внутренней оптимизации
- Куплю Ваш сайт
- Куплю Вашу подпись на форуме
- Подписаться на рассылку
- Реклама на сайте
- Карта сайта
- Обратная связь
Как сделать чекбокс в html
Для создания чекбокса используется тег и атрибутом type , значение которого равняется checkbox . Как и в случае с другими элементами формы такой input можно вложить в label или связать их с помощью идентификатора
id="html" type="checkbox"> for="html">Хочу изучать HTML
type="checkbox"> Хочу изучать HTML
Чекбокс: что это или как обрабатывать события HTML checkbox
Элемент HTML checkbox позволяет выбрать одно значение в форме. Например, чтобы узнать владеет ли пользователь английским языком, можно добавить чекбокс. Если да, то он устанавливает флажок, если нет — оставляет его пустым.
В этой статье мы рассмотрим:
- Как обрабатывать события onclick и onchange.
- Как обрабатывать события checkbox в JQuery.
- Как отправлять данные формы при установке флажка.
- Как отобразить / скрыть раздел формы при установке флажка чекбокса.
В этом примере мы будем использовать форму, через которую передается имя пользователя. В ней размещен чекбокс, в котором пользователь должен установить флажок, если он свободно владеет английским языком. Если нет, то отображается подсказка с текстом, что для этой вакансии нужен разговорный английский.
Обновлено: 2023-05-30 18:29:18 Вадим Дворников автор материала
Обработка событий checkbox с использованием JavaScript
Теперь нужно привязать к чекбоксу событие, чтобы проверять его состояния, и выводить сообщение, если флажок не установлен. Обратите внимание, что я добавил к чекбоксу свойство checked, которое будет задано по умолчанию.
Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.
Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.
В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():
functioncheckFluency() < varcheckbox=document.getElementById('fluency'); if(checkbox.checked!=true) < alert("you need to be fluent in English to apply for the job"); >>
В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.
Использование jQuery
То же самое можно реализовать с помощью jQuery. В коде примера я подключил jQuery и добавил пару строк CSS для стилизации страницы.
Я также добавил HTML, который мы использовали в предыдущем разделе. В этом примере мы будем использовать jQuery вместо JavaScript.
Обратите внимание, что я удалил событие onclick. В jQuery мы будем привязывать событие к элементу без необходимости вызывать его из HTML-кода.
Ниже приводится код JavaScript:
$(document).ready(function() < $('#fluency').change(function() < if(this.checked!=true) < alert('you need to be fluent in English to apply for the job'); >>); >);
Я использую $(document).ready(); с анонимной функцией. Это функции, объявленные во время выполнения, и без имени.
Внутри анонимной функции я разместил следующий код:
$('#fluency').change(function() < if(this.checked!=true) < alert('you need to be fluent in English to apply for the job'); >>);
Мы используем знак доллара ‘$’ , который является сокращением для jQuery. Поэтому $(‘# fluency’) — это то же самое, что и jQuery (‘# fluency’) . Затем мы привязываем событие и внутри него используем синтаксис анонимных функций во второй раз. Код, находящийся внутри анонимной функции, будет запускаться каждый раз при возникновении события.
if(this.checked!=true)
Это то же самое, что и оператор if, который мы применяли в первом примере. Только вместо document.getElementById() мы используем ключевое слово this. Оно указывает на элемент, который вызовет события. В данном примере это checkbox.
Отправка данных формы при установке флажка
Данные формы можно отправить сразу после того, как пользователь установит флажок. Для этого нужно указать идентификатор формы. Затем я использую jQuery, чтобы захватить его и отправить данные на обработку.
$('#fluency').change(function() < if(this.checked==true) < $('#myform').submit(); >>
Скрыть / показать элементы при установке флажка
Большинство из вас встречало формы с разделом, который отображается после установки флажка чекбокса. Для реализации данного решения будем использовать jQuery.
show moreinfo
Внутри div располагается форма. В ее поля пользователь вводит имя и адрес электронной почты. В веб-форме также есть чекбокс и текстовая область (textarea).
Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):
#conditional_part
Следующий шаг — создание JavaScript- кода, который будет отображать и скрывать эту текстовую область.
$('#more_info').change(function() < if(this.checked!=true)< $("#conditional_part").hide(); >else < $("#conditional_part").show(); >>);
К checkbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.
Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show() . Они изменяют значения свойства display блока div с идентификатором conditional_part.