Как сделать галочку в css

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

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

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

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

Флажки

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать произвольное количество вариантов из предложенных или поставить галочку в одном пункте. Если требуется выбор одного варианта из нескольких, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.

Атрибуты флажков перечислены в табл. 1.

Табл. 1. Атрибуты флажков

Атрибут	Описание
name	Имя флажка для идентификации поля.
disabled	Блокирует флажок для выбора.
form	Идентификатор формы для связывания флажка с элементом .
type	Для флажка значение должно быть checkbox .
checked	Предварительное выделение флажка.
value	Задаёт, какой текст будет отправлен на сервер.
autofocus	Элемент получает фокус после загрузки документа.
required	Перед отправкой формы обязательно следует поставить галочку.

Читать:

Как спрятать элемент в css

Как обычно, флажки нельзя вкладывать внутрь ссылок и кнопок.

Использование флажков показано в примере 1.

Пример 1. Создание флажков

Поскольку флажки здесь являются одной группой, то значение атрибута name у них одинаковое. В результате получим следующее (рис. 1).

Вид флажков в браузере

Рис. 1. Вид флажков в браузере

Курсы javascript

как сделать checkbox чтобы отмечался крестиком а не галочкой?

20.01.2017, 11:24

Регистрация: 27.05.2010

Сообщений: 33,011

maks777,
http://www.csscheckbox.com/

20.01.2017, 11:37

Регистрация: 21.11.2015

Сообщений: 440

maks777,
Это придется кастомный чекбокс делать
1) там через before/after (через его content или background)
2) самому чекбоксу делаешь opacity: 0 и позиционируешь абсолютно псевдоэлемент на его место (чтобы не перекрывалось надо z-index настроить)

Как сделать галочку с политикой сайта под кнопкой формы в Tilda

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)

Заказать установку примера

Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.

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

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

Флажки

Курсы javascript

Как сделать галочку с политикой сайта под кнопкой формы в Tilda

Похожие записи