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

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

Галочки еще называют чекбоксами. По факту это просто поле ввода input с атрибутом type=»checkbox» . Ниже пример, как это выглядит в HTML:

 type="checkbox"> 

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

 type="checkbox" checked > Опция 1 

Флажки

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

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

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

Атрибут	Описание
checked	Предварительное выделение флажка.
name	Имя флажка для его идентификации обработчиком формы.
value	Задаёт, какое значение будет отправлено на сервер.

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

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

HTML5 IE Cr Op Sa Fx

       
В каких годах произошли самые известные извержения вулкана Кракатау?
 
 1417
 
 1680
 
 1883
 
 1934
 
 2010
  

В результате получим следующее (рис. 1).

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

Нарисовать галочку средствами CSS

Можете подсказать, как нарисовать в CSS такую галочку(нужно именно нарисовать, а не вставить картинкой)?

Отслеживать
задан 15 ноя 2015 в 9:23
Александр Агапов Александр Агапов
349 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков
Вам в чекбокс или повсеместно? А в css тоже нельзя применять url() ?
15 ноя 2015 в 10:04

Нет, к сожалению нельзя. Мне просто галочку, без чекбокса). Как я понял, решения пока нет. Я применяю 2 наклонных линии, но пока безрезультатно.

15 ноя 2015 в 16:36

смотря в чем это будет использоваться. Если нужна поддержка векторных иконок, тогда лучше использовать svg или иконочные шрифты. Можно конечно нарисовать с transform rotate, но при неоднократном использовании такой методики это будет лишь перегружать код

15 ноя 2015 в 16:54

@Александр Агапов Добавлен свежий вариант с использованием входящим в тренд гугловских символьных шрифтов в стиле material design ru.stackoverflow.com/a/773972/28748

22 янв 2018 в 9:25

11 ответов 11

Сортировка: Сброс на вариант по умолчанию

[id^=c] < display: none; >[id^=c] + label < display: block; width: 30px; height: 30px; border: 1px solid green; text-align: center; >[id^=c] + label:before < content: '\2713'; display: inline-block; color: green; font-size: 30px; line-height: 30px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: 0.3s; transition: 0.3s; >[id^=c]:checked + label:before

[id^=c] < display: none; >[id^=c] + label < display: block; width: 30px; height: 30px; border: 1px solid green; text-align: center; overflow: hidden; position: relative; >[id^=c]:checked + label span < position: relative; display: inline-block; margin-left: -9px; >[id^=c]:checked + label span:before < content: ''; position: absolute; left: -5px; width: 10px; height: 3px; background: #c00; -webkit-transform: rotate(50deg); transform: rotate(50deg); >[id^=c]:checked + label span:after

Вариант 3 (clip-path)

[id^=c] < display: none; >[id^=c] + label < display: block; width: 30px; height: 30px; border: 1px solid green; text-align: center; position: relative; >[id^=c] + label:before < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: green; -webkit-clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); -webkit-transform: scale(0); transform: scale(0); -webkit-transition: transform .3s; transition: transform .3s; >[id^=c]:checked + label:before

Отслеживать
ответ дан 15 ноя 2015 в 10:37
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

Спасибо большое). Но мне просто галочку желательно сделать, как если бы мы вставляли картику через url)

15 ноя 2015 в 16:38

Если просто галочку без чекбокса, то вот идея:

.wrap < position: relative; margin-top: 100px; >.check-sign < position: absolute; background: red; >#check-part-1 < width: 50px; height: 20px; transform:rotate(45deg); >#check-part-2

Идея в том, чтобы нарисовать два прямоугольника и расположить их под прямыми углами относительно друг друга. Естественно это надо делать в их общем контейнере. С размерами и расположением если захотите, можете сами потом поиграться и сделать как вам нужно

Отслеживать
ответ дан 15 ноя 2015 в 16:49
Алексей Шиманский Алексей Шиманский
71.9k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков

Анимация галочки начинается после клика мышкой

Отслеживать
ответ дан 4 июл 2017 в 6:06
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
SMIL сейчас deprecated, в Chrome когда-нибудь выпилят, а в IE/Edge никогда и не работало.
4 июл 2017 в 16:29

@Qwertiy уже, как два года deprecated и до сих пор жив и как говорится нет ничего более постоянного, чем временное Посмотри caniuse еще на 5 будущих версий вперед продлили

4 июл 2017 в 16:34
Но в IE/Edge всё равно нет и не будет.
4 июл 2017 в 16:42

@Qwertiy IE/Edge да, согласен, но кроме smil эти браузеры и многое другое делают очень криво. Но факт, остается фактом, SVG набирает популярность, особенно за бугром, недаром начиная c ie11 поддержка SVG выросла

4 июл 2017 в 16:49

Постарался повторить и упростить

i.check

Отслеживать
ответ дан 4 июл 2017 в 7:58
Евгений Миронов Евгений Миронов
519 4 4 серебряных знака 11 11 бронзовых знаков

Просто check галочка, просто SVG:

Отслеживать
ответ дан 4 июл 2017 в 17:39
22.4k 10 10 золотых знаков 56 56 серебряных знаков 120 120 бронзовых знаков

Простейшая галочка. Толщину и цвет регулируйте сами:

.select_header < position: relative; font-size: 2em; padding-left: 70px; >.select_header::before

Выберите язык

Отслеживать
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков
ответ дан 4 июл 2017 в 0:52
61 1 1 серебряный знак 1 1 бронзовый знак

Такое простое решение:

.checkmark < display: inline-block; width: 45px; height: 14px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); >.checkmark_stem < position: absolute; width: 7px; height: 26px; background-color: #e84245; left: 25px; top: -8px; >.checkmark_kick

Отслеживать
ответ дан 18 ноя 2015 в 8:39
Александр Агапов Александр Агапов
349 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков

Самая простая в мире галочка :

 ✔

Отслеживать
ответ дан 4 июл 2017 в 4:02
Потерянная Симка Потерянная Симка
41 2 2 бронзовых знака
Вы же просто символ написали, а надо нарисовать.
– user236939
4 июл 2017 в 8:14

Ещё один вариант

Хорошо подойдёт для приложений, которые выполняются в стиле Material design, шрифт адаптирован для мобильных версий.

Галочку можно легко внедрить в HTML с помощью символьного шрифта от Google, достаточно просто подключить символьный шрифт и написать название иконки.

Выбирать иконки по названиям можно здесь

Ниже пример использования.

Работает во всех браузерах. IE поддерживает начиная с 10 версии.

 i < margin: 100px 50px 50px 80px; transition: transform 1s ease-in-out; >i:hover < transform: scale(10); >.green .red

 done error 

HTML коды символов Галочки

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

Обозначение	HTML код символа	Название
✅	✅	Жирная незакрашенная галочка
✓	✓	Символ Галочка обычная
✔	✔	Символ Галочка жирная
☑	☑	Символ галочка в квадрате

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

• Главная
• Партнерские программы
• Рейтинг партнерских программ
• Статьи про SEO
• Термины SEO
• Описание бирж
• HTML-уроки и советы
• CSS-уроки
• Биткоины
• PHP-уроки
• Бинарные опционы
• Социальные сети
• Обзоры систем
• Все про CMS
• Реклама в интернете

• Продвижение сайта
• Аудит внутренней оптимизации
• Куплю Ваш сайт
• Куплю Вашу подпись на форуме
• Подписаться на рассылку
• Реклама на сайте
• Карта сайта
• Обратная связь