Есть ли простой способ изменить цвет пули в списке? - PullRequest
Новая
       53

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

83 голосов
/ 17 сентября 2008

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

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

Ответы [ 16 ]

156 голосов
/ 17 сентября 2008

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

Обернуть текст списка в промежуток: 

<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 */
}
44 голосов
/ 27 ноября 2010

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

<!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>
16 голосов
/ 16 апреля 2013

Это было невозможно в 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 и пока не работает ни в одном из основных браузеров.

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

5 голосов
/ 17 сентября 2008 
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

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

2 голосов
/ 20 апреля 2012

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

ul {
  list-style-image:url('gray-bullet.gif');
}
2 голосов
/ 05 июля 2009

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

Хорошо, дело в том, что вы должны указать внутренний тег, чтобы текст LIst был обычным черным (или тем, что вы хотите получить). Но верно и то, что вы можете переопределить любые теги и внутренние теги с помощью 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>
0 голосов
/ 15 июня 2017

Это также работает, если мы установим цвет для каждого элемента, например: Теперь я добавил маржу слева. 

<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;
}
0 голосов
/ 25 ноября 2015

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

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

Я расширил извлечение из страницы примеров списка Font 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>

Font Awesome (в основном) поддерживает IE8 и поддерживает IE7, только если вы используете более старую версию 3.2.1 .

0 голосов
/ 06 января 2013

Вы можете использовать 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
});
0 голосов
/ 17 сентября 2008

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

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

Страница:
...