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

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

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

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

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

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

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

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

Увидеть

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

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

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

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

Мы можем комбинировать 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вы можете прикрепить к ним! Посмотрите на пример «яблочко» ниже:

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="5"/></svg>');
}
ul 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"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul 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="3"/></svg>');
}
ul ul ul 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"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  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="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

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

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

Кодировки

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

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

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

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

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

css трюки на SVG

mdn на svgs

Основываясь на решении @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;
}

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

li {
  color: blue;
}

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

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

Создание решений @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

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

Для меня лучший вариант - использовать псевдоэлементы 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/ (выберите этот вариант, который не требует для работы псевдоэлементов, например треугольников)

:: маркер

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

ul li::marker {
  color: red;
}

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

Основываясь на ответе @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 */
}

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

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;
}

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

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

ul {
  color: red;
}

Встроенная версия, работает для 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 .