CSS. Поменять пункты списка на галочки
Возможно ли вместо пунктов в списке CSS поставить галочки, нарисованные в CSS. Т.е пункты 1, 2, 3, 4 заменить на желтые галочки (как на рисунке), сделанные в СSS?
Отслеживать
задан 5 ноя 2015 в 9:01
Александр Агапов Александр Агапов
349 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
* < padding: 0; margin: 0; >ol < list-style: none; >ol > li < padding-left: 20px; position: relative; margin: 10px; >ol > li:before
Отслеживать
ответ дан 5 ноя 2015 в 9:09
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
- Доступные цены
- Оперативное прибытие на место ДТП
- Быстрое и грамотное оформление документов
- Круглосуточная поддержка и обратная связь
Отслеживать
ответ дан 5 ноя 2015 в 9:07
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
- html
- css
- список
- css-animation
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Хочу изменить вид маркера на другой символ. Как это сделать?
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).
Пример 1. Стандартные маркеры
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере в качестве маркеров используется квадрат (рис. 1).
Рис. 1. Вид маркеров
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).
Пример 2. Использование :before и content
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).
Рис. 2. Маркеры в виде символа
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.
Оформление списков в CSS
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
Изменение маркеров в маркированных списках HTML
Как изменить цвет и размер маркера в одном из списков, если их несколько на странице? Как сделать маркер-картинку?
Отслеживать
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
задан 14 сен 2011 в 14:56
1 1 1 серебряный знак 1 1 бронзовый знак
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 14 сен 2011 в 15:00
14.7k 1 1 золотой знак 26 26 серебряных знаков 48 48 бронзовых знаков
Отслеживать
ответ дан 14 сен 2011 в 15:00
2,140 10 10 серебряных знаков 10 10 бронзовых знаков
что бы поменять цвет маркеров одного списка используем «точечный удар» =)
ul /* Все списки зеленые */ ul.one /* - красный */ Маркер картинка — как писал ling link text, но мне больше нравиться так:
Отслеживать
ответ дан 20 сен 2011 в 9:11
416 2 2 серебряных знака 11 11 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.