Изменение цвета маркеров в списке HTML без использования диапазона

88

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

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

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

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

Ким Андерсен
источник

Ответы:

34

Если вы можете использовать изображение, вы можете это сделать. А без изображения вы не сможете изменить цвет только маркеров, но не текста.

Использование изображения

li { list-style-image: url(images/yourimage.jpg); }

Увидеть

изображение в стиле списка

Без использования изображения

Затем вам нужно отредактировать разметку HTML и включить диапазон в список и раскрасить li и span разными цветами.

рахул
источник
1
Еп, это могло сработать. Но на самом деле я решил использовать фоновое изображение, а затем тип стиля списка: none; Это дало мне свободу позиционировать «маркеры» немного больше, чем изображение в стиле списка. Но все же вы получите правильный ответ 1+.
Ким Андерсен,
6
Также работает с data-uri svgs:list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
Джон Суррелл
Используя метод @JonSurrell, мне удалось добиться очень приятного результата. Жаль, что это не один из предложенных ответов. Решение является кроссбраузерным для публикаций IE8 и легко модифицируется для создания интересных пользовательских фигур.
KoldBane
@KoldBane, посмотрите мой новый ответ :)
Джон Суррелл,
@DimitryK, пожалуйста, взгляните на полный ответ, который я написал, и направляйте туда любые комментарии. Хорошо работает в FF43.
Джон Суррелл,
187

Я справился с этим без добавления разметки, а вместо этого использовал 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;
}
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Марк
источник
5
Также вот как можно сделать то же самое для упорядоченных списков: jsfiddle.net/uZRGN
Nightfirecat,
3
Превосходно. С таким широким использованием IE8 + я думаю, что это должен быть ответ сейчас. (Обратите внимание, что раньше я font-size:1emполучал пулю с более пропорциональными пропорциями!)
EvilDr
Мне не нравится этот подход, потому что что происходит, когда кто-то пытается отобразить ul с типом стиля списка, установленным на none? Это означает, что вы должны отнести эти стили к определенному классу, например ul.greenDisc
ctb 01
19

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

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

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

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

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

Некоторые браузеры требуют widthи heightатрибуты , которые будут устанавливать на <svg>, или они не показывают ничего. На момент написания последние версии Firefox обнаруживают эту проблему. Я установил оба атрибута в примерах.

Кодировки

Недавний комментарий напомнил мне о кодировках для data-uri. В последнее время это было для меня проблемой, и я могу поделиться небольшой информацией, которую я исследовал.

Спецификация data-uri , которая ссылается на спецификацию URI , говорит, что svg должен быть закодирован в соответствии со спецификацией URI . Это означает, что нужно кодировать все виды символов, например, <становится %3C.

Некоторые источники предлагают кодировку base64, которая должна устранить проблемы с кодировкой, однако она излишне увеличит размер SVG, а кодировка URI - нет. Я рекомендую кодировку URI.

Больше информации:

поддержка браузера: > ie8

css трюки на SVG

mdn на svgs

Джон Суррелл
источник
1
На данный момент это лучший ответ, и он работает даже с конвертерами презентаций, такими как Cleaver.
gaborous
1
Мне очень нравится этот подход, потому что стиль не испортит нерегулярное использование ul, то есть когда list-style-type установлен в none, а также потому, что он не зависит от переноса содержимого li в какой-то другой элемент. Однако у меня это не работает в IE11 или Edge ...?
ctb 01
@ctb Я не тестировал эти браузеры специально, но вы читали предупреждение о кодировках? Возможно, вы не сможете скопировать / вставить "красивый" <svg>код, попробуйте сначала запустить его через кодировщик uri.
Джон
1
@JonSurrell да, сработало, как только я закодировал код svg. Спасибо, это было здорово.
ctb 08
1
Мне нравится этот ответ, потому что он также поддерживает относительные размеры, такие как r = "1.5em"
plexoos
16

Основываясь на решении @Mark - поскольку символ маркера отображается по-разному в разных шрифтах и ​​браузерах, я использовал следующую технику css3 с border-radius, чтобы создать пулю, над которой у меня больше контроля:

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;
}
Джессика
источник
1
@ddilsaver, вы правы, я устанавливал цвет фона в другом правиле, которое было специфичным для каждой позиции (клиент хотел разного цвета для каждой позиции). я обновил.
Джессика
2
Очень красивое решение. Я бы предложил изменить border-radius на 50%, чтобы сделать его немного более гибким в случае изменения высоты / ширины.
Тим
11

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

li {
  color: blue;
}

li::first-line {
  color: black;
}
<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Лассе Йоргенсен
источник
хорошее простое решение для однострочных списков
planetClaire
6

Создание решений @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потому что это позиция маркеров по умолчанию в браузерах: родительский padding/2

ddilsaver
источник
2

Мне тоже очень понравился ответ Марка - мне нужен был набор 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:», отличался от кода Марка (этот шестнадцатеричный круг казался слишком высоким). Тот, который я использовал, кажется, идеально подходит посередине. Я также нашел несколько других форм (квадраты, треугольники, круги и т. Д.) Прямо здесь

Беверли Лодж
источник
1

Для меня лучший вариант - использовать псевдоэлементы CSS, поэтому для 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 */
}
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Примечания:

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

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

Jmarceli
источник
1

:: маркер

Вы можете использовать ::markerпсевдоэлемент CSS для выбора поля маркера элемента списка (например, маркеров или чисел).

ul li::marker {
  color: red;
}

Примечание. На момент публикации этого ответа это считалось экспериментальной технологией и было реализовано только в Firefox и Safari (пока).

Грант Миллер
источник
Протестировано и работает в текущих версиях Firefox и Safari. См. Поддержку для других браузеров https://caniuse.com
daniels
0

Основываясь на ответе @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 */
}
Джеймс Уиттред
источник
0

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

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

Я выбрал другого персонажа для отображения пули, наблюдая за ним здесь . Мне нужно было соответствующим образом отрегулировать маржу, возможно, значения не будут применяться к выбранному вами шрифту (числа используют ваш веб-шрифт).

Марс
источник
0

Попробуйте использовать вместо этого:

ul {
  color: red;
}
user3051730
источник
0

Встроенная версия, работает для Outlook Desktop:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .

Даниэль Феррейра
источник