Змінюйте колір маркерів списку HTML без використання інтервалу

Мені було цікаво, чи є спосіб змінити колір на кулях у списку.

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

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

Мені неможливо вставити що-небудь у лі, наприклад, 'span' або 'p'. То чи можу я якось розумно змінити колір куль, але не текст?

Якщо ви можете використовувати зображення, то можете це зробити. А без зображення ви не зможете змінити колір лише куль, а не тексту.

Використання зображення

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

Подивитися

список-стиль-зображення

Без використання зображення

Потім вам потрібно відредагувати розмітку HTML і включити інтервал всередині списку та забарвити li і span різними кольорами.

Мені це вдалося без додавання розмітки, а замість цього li:before. Це, очевидно, має всі обмеження :before(відсутність старої підтримки IE), але, схоже, це працює з IE8, Firefox та Chrome після дуже обмеженого тестування. Стиль маркера також обмежений тим, що знаходиться в Unicode.

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 трюки на svgs - -

mdn на svgs

Нарощуючи рішення @ 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;
}

Я знаю, що це справді дуже, давнє запитання, але я бавився з цим і придумав спосіб, якого я не бачив у дописі. Дайте списку колір, а потім перезапишіть колір тексту за допомогою ::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оскільки це позиція маркерів за замовчуванням у браузерах: parent 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;
}

Крім того, я виявив, що шістнадцятковий код, який я використовував для "вмісту:", відрізнявся від коду Марка (це шістнадцяткове коло, здавалося, було занадто високо). Той, котрий я використовував, здається, ідеально сидить посередині. Я також знайшов ще кілька фігур (квадрати, трикутники, кола тощо) прямо тут

Для мене найкращим варіантом є використання псевдоелементів 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:

<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 .