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

Ответ 1

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

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

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

См

list-style-image

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

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

Ответ 2

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

Ответ 3

Мы можем объединить list-style-image с svg s, который мы можем встроить в 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>

Ответ 4

Создание @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;
}

Ответ 5

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

li {
  color: blue;
}

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

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

Ответ 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, потому что это положение маркеров по умолчанию в браузерах: parent padding/2

Ответ 7

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

Ответ 8

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

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>

Ответ 9

:: Маркер

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

ul li::marker {
  color: red;
}

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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

ul {
  color: red;
}