Как для кнопки добавить галочку css

Как создать галочку или checkbox HTML.

Галочка (переключатель) или checkbox в html – это простое поле ввода input, которому присвоен атрибут type=»checkbox».

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

Это может выглядеть вот так:

Чтобы создать такой переключатель на HTML, нужно использовать следующий код:

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

Выбор 1

Давайте посмотрим, как это работает на практике.

Если вы хотите обработать информацию, которую пользователь отметил с помощью checkbox и выдать соответствующий результат, нужно воспользоваться клиентскими или серверными языками веб-программирования.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Флажок checkbox

Флажок checkbox представляет собой элемент (галочку или птичку) HTML формы, который может иметь два состояния: отмечен и не отмечен.

Флажок создается с помощью тега input с атрибутом type в значении checkbox . Внешний вид флажка:

Отмеченный чекбокс будет посылать на сервер содержимое атрибута value . Если атрибута value у чекбокса нет — он будет посылать строку «on». Если чекбокс не отмечен — ничего не будет присылаться на сервер не зависимо от наличия атрибута value .

Пример

Давайте сделаем два флажка checkbox: пусть первый будет отмечен (так как ему дан атрибут checked ), а второй — нет:

Пример . Заблокированный чекбокс

Давайте посмотрим на заблокированный с помощью атрибута disabled флажок. При нажатии на него его состояние не будет меняться:

Пример . Заблокированный и отмеченный чекбокс

А теперь давайте заблокируем флажок, в отмеченном состоянии, атрибутом disabled и зададим ему атрибут checked :

Смотрите также

• радио переключатели,
  с помощью которых можно сделать выбор
• атрибут checked ,
  который делает флажок чекбокс отмеченным
• псевдокласс checked ,
  который задает стили для отмеченных чекбоксов
• атрибут disabled ,
  который блокирует элементы форм
• тег label ,
  который задает подсказку для чекбокса

Текст для галочки

Создайте страницу, показанную на рис. 1. Текст возле отмеченных галочек должен выделяться фоновым цветом. Код должен корректно работать в последних версиях браузеров Internet Explorer, Firefox, Opera, Safari, Chrome.

     input[type="checkbox"]:checked + span < background: #fc0; >span  
 Балка рукояти
 
 Шестерня
 
 Вал
 
 Пимпочка
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

О сайте

Основные разделы

HTML

CSS

Сайт

© 2002–2024 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

Как сделать чекбокс на 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.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.