Есть ли простой способ изменить цвет пули в списке?

Все, что я хочу, - это изменить цвет пули в списке на светло-серый. По умолчанию он черный, и я не могу понять, как его изменить.

Я знаю, что могу просто использовать образ; Я не хочу этого делать, если могу помочь.

ОТВЕТЫ

Ответ 1

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

Оберните текст списка в диапазоне:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Затем немного измените свои правила стиля:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

Ответ 2

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

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

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

Ответ 3

Это было невозможно в 2008 году, но вскоре стало возможно (надеюсь)!

Согласно Спецификация W3C CSS3, вы можете иметь полный контроль над любым числом, символом или другим символом, сгенерированным перед элементом списка, с помощью ::marker псевдоэлемент. Чтобы применить это к большинству голосованных решений:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

Пример JSFiddle

Обратите внимание, однако, что по состоянию на июль 2016 года, это решение является лишь частью рабочего проекта W3C и не работает ни в каких крупных браузерах.

Если вы хотите эту функцию, выполните следующие действия:

Ответ 4

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

Большая проблема с этим методом - дополнительная разметка. (тег span)

Ответ 5

Привет, может быть, этот ответ задерживается, но он правильный, чтобы достичь этого.

Хорошо, факт состоит в том, что вы должны указать внутренний тег, чтобы LIst текст был на обычном черном (или том, что вы хотите получить). Но также верно, что вы можете переустановить любые TAGS и внутренние теги с помощью CSS. Таким образом, лучший способ сделать это использует тег SHORTER для переопределения

Упорядочить это определение CSS:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

И этот html-код:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Вы получаете требуемый результат. Также вы можете сделать каждый диск разным цветом:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>

Ответ 6

Просто сделайте пулю в графической программе и используйте list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}

Ответ 7

Оберните текст в элементе списка с помощью диапазона (или другого элемента) и примените цвет пули к элементу списка и цвету текста к диапазону.

Ответ 8

По спецификация W3C,

Свойства списка... не позволяют авторам указывать отдельный стиль (цвета, шрифты, выравнивание и т.д.) для маркера списка...

Но идея с пролетом внутри списка выше должна работать нормально!

Ответ 9

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

Ответ 10

Вы можете использовать Jquery, если у вас много страниц, и вам не нужно идти и редактировать свою разметку.

вот простой пример:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});

Ответ 11

В вопросе 2008 года я подумал, что могу добавить более свежий и актуальный ответ о том, как вы можете изменить цвет маркеров в списке.

Если вы хотите использовать внешние библиотеки, Font Awesome дает вам масштабируемые векторные значки и в сочетании с Вспомогательные классы Bootstrap (например, text-success), вы можете создавать довольно интересные и настраиваемые списки.

Я расширил извлечение из страницы примеров списка шрифтов Awesome ниже:

Используйте fa-ul и fa-li, чтобы легко заменить маркеры по умолчанию в неупорядоченных списках.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Ответ 12

Он также работает, если мы задаем цвет для каждого элемента, например: Я добавил немного маржи влево.

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}

Ответ 13

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Один Два Три

Ответ 14

Вы можете использовать CSS для достижения этого. Указав список в выбранном вами цвете и стиле, вы также можете указать текст как другой цвет.

Следуйте примеру http://www.echoecho.com/csslists.htm.

Ответ 15

Просто используйте CSS:

<li style='color:#e0e0e0'>something</li>

Ответ 16

Вам нужно установить "стиль списка" с помощью CSS и присвоить ему значение color: value. Пример:

ul.colored {list-style: color: green;}