Изменить цвет маркеров. Как изменить цвет маркеров в списке? Красивый и правильный способ

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

css

li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. 1 Посадить дерево
2. 2 Построить дом
3. 3 Вырастить сына

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

css

ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

• li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
• counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
  .
  1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
  2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .

подробнее о css-счетчиках можно посмотреть в

Мы можем объединить list-style-image с svg s, который мы можем встроить в css! Этот метод предлагает невероятный контроль над "пулями", которые могут стать чем угодно.

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

Ul { list-style-image: url("data:image/svg+xml,"); }

Но это только начало. Это позволяет нам делать любую сумасшедшую вещь, которую мы хотим с этими пулями. круги или прямоугольники просты, но все, что вы можете нарисовать с помощью svg , можно вставить там! Посмотрите пример яблочного яблока ниже:

Ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }

• Big circles!
  • Big rectangles!
  • b
    • Small circles!
    • c
      • Small rectangles!
• Bulls
• eyes.
• Multi
• color

Атрибуты ширины/высоты

В некоторых браузерах для

Задача

Изменить вид маркеров в списке и заменить их на другой символ.

Решение

С помощью 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.

Задача

Задать цвет маркеров в списке не изменяя цвет текста.

Решение

Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь

1. вкладываем тег , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
2. текст
создаем конструкцию
3. текст
. При этом цвет маркеров определяется стилевым свойством color для селектора LI , а цвет текста — для селектора SPAN (пример 1).

Пример 1. Использование вложенных тегов

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Скрипка
• Гитара
• Волынка
• Шарманка
• Челеста

Результат данного примера показан ниже (рис. 1).

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег . Поэтому разберём хитрый способ, полностью основанный на работе CSS.

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.

Пример 2. Использование псевдоэлемента:before

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Север
• Юг
• Запад
• Восток

Результат данного примера показан на рис. 2.



Рис. 2. Маркеры, созданные с помощью стилей





размер маркера списка css (8)

Мне было интересно, есть ли способ изменить цвет на пули в списке.

У меня есть список:

• House
• Garden

Невозможно вставить что-либо в li, например, «span» и «p». Могу ли я изменить цвет пуль, но не текст каким-то умным способом?

Для меня лучшим вариантом является использование псевдоэлементов CSS, поэтому для disc пули disc это будет выглядеть так:

ul { list-style-type: none; } li { position: relative; } li:before { content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px; /* adjust to suit your needs */ border-radius: 50%; left: -15px; /* adjust to suit your needs */ top: 0.5em; background: #f00; /* adjust to suit your needs */ }

• first
• second
• third
• width и height должны иметь равные значения, чтобы удерживать указатели округлыми
• вы можете установить border-radius равным нулю, если вы хотите иметь square пули

Для более стилей пули вы можете использовать другие css-формы https://css-tricks.com/examples/ShapesOfCSS/ (выберите это, для которого не требуются псевдоэлементы, например, треугольники)

Основываясь на ответе @ ddilsaver. Я хотел иметь возможность использовать спрайт для пули. Это, похоже, работает:

Li { list-style: none; position: relative; } li:before { content:""; display: block; position: absolute; width: 20px; height: 20px; left: -30px; top: 5px; background-image: url(i20.png); background-position: 0px -40px; /* or whatever offset you want */ }

Я знаю, что это действительно, действительно, старый вопрос, но я играл с этим и придумал способ, которого я не видел. Дайте списку цвет, а затем перезапишите цвет текста с помощью::first-line селектора::first-line . Я не эксперт, поэтому, возможно, что-то не так с этим подходом, что мне не хватает, но, похоже, он работает.

li { color: blue; } li::first-line { color: black; }

• House
• Garden

Мне тоже очень понравился ответ Марка - мне нужен набор разных цветных UL, и, очевидно, было бы проще просто использовать класс. Вот что я использовал для апельсина, например:

Ul.orange { list-style: none; padding: 0px; } ul.orange > li:before { content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px; line-height: 15px; }

Кроме того, я обнаружил, что шестнадцатеричный код, который я использовал для «content:», был другим, чем у Marc"s (этот шестигранный круг казался слишком высоким). Тот, который я использовал, кажется, сидит совершенно посередине. Я также нашел несколько других фигур (квадраты, треугольники, круги и т. Д.)

Построение обоих решений @Marc и @jessica - это решение, которое я использую:

Li { position:relative; } li:before { content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background-color: #000; }

Я использую em для размеров шрифта, поэтому, если вы установили top значение в.5em оно всегда будет помещено в середину вашей первой строки текста. Я использовал left:-20px потому что это позиция left:-20px по умолчанию в браузерах: parent padding/2

Исходя из решения @ Marc - поскольку символ пули визуализирован по-разному с разными шрифтами и браузерами, я использовал следующую технику css3 с радиусом границы, чтобы сделать пулю, с которой я больше контролирую:

Li:before { content: ""; background-color: #898989; display: inline-block; position: relative; height: 12px; width: 12px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-right: 4px; top: 2px; }

Мы можем комбинировать list-style-image с svg s, который мы можем встроить в css ! Этот метод предлагает невероятный контроль над «пулями», которые могут стать чем угодно.

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

"); }

Но это только начало. Это позволяет нам делать любую сумасшедшую вещь, которую мы хотим с этими пулями. круги или прямоугольники легко, но все, что вы можете нарисовать с помощью svg , можете зайти туда! Посмотрите пример яблочного яблока ниже:

ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }

• Big circles!
  • Big rectangles!
  • b
    • Small circles!
    • c
      • Small rectangles!
• Bulls
• eyes.
• Multi
• color

Ширина / высота атрибутов

Для некоторых браузеров требуются атрибуты width и height которые должны быть установлены на

Кодировки

Я справился с этим без добавления разметки, но вместо этого использовал li:before . Это, очевидно, имеет все ограничения:before (без старой поддержки IE), но, похоже, работает с IE8, Firefox и Chrome после очень ограниченного тестирования. Стиль пули также ограничен тем, что находится в юникоде.

li { list-style: none; } li:before { /* For a round bullet */ content: "\2022"; /* For a square bullet */ /*content:"\25A0";*/ display: block; position: relative; max-width: 0; max-height: 0; left: -10px; top: 0; color: green; font-size: 20px; }