Как сделать галочку css
#kucomb-navasog <
position: relative;
display: inline-block;
width: 28px;
height: 28px;
>
#kucomb-navasog::before position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 3px;
background-color: #2c6dad;
content: «»;
transform: translateX(10px) rotate(-45deg);
transform-origin: left bottom;
>
#kucomb-navasog::after position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #336699;
content: «»;
transform: translateX(10px) rotate(-45deg);
transform-origin: left bottom;
>
Как видим, что не сложно на стилистике построить галочку. Здесь можно было бы применить преобразование к основному элементу контейнера вместо двух псевдоэлементов, но контейнер был бы повернут за пределы своего обычного положения.
Это могло привести к разрыву соседнего содержимого, однако преобразование может быть применено и к основному контейнеру в зависимости от варианта использования.
Как в css content вставить галочку?
Проблема в следующем если я пишу contеnt: «✓» ; он мне выдает кракозябры. Пробовал менять кодировку но ничего не получается. как быть?
- Вопрос задан более трёх лет назад
- 7596 просмотров
Комментировать
Решения вопроса 1
Ответ написан более трёх лет назад
Нравится 2 3 комментария
Иван Иванов @ZZiliST Автор вопроса
Спасибо ) а то как только не тыкался, не получалось.
snap44, Привет, если не трудно подскажи, где ты берёшь эти хексы на галочки? ( хотя я даже не уверен что это называется хексами ). . .? И есть ли другие варианты этих галочек?
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 12 часов назад
- 63 просмотра
Как сделать галочку в html
Галочки еще называют чекбоксами. По факту это просто поле ввода input с атрибутом type=»checkbox» . Ниже пример, как это выглядит в HTML:
type="checkbox"> Чекбокс можно сделать отмеченным по умолчанию. Для этого добавляется атрибут checked :
type="checkbox" checked > Опция 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 серебряных знаков 65 65 бронзовых знаков
Спасибо большое). Но мне просто галочку желательно сделать, как если бы мы вставляли картику через 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.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
Анимация галочки начинается после клика мышкой
Отслеживать
ответ дан 4 июл 2017 в 6:06
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
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 серебряных знаков 119 119 бронзовых знаков
Простейшая галочка. Толщину и цвет регулируйте сами:
.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