Изменить цвет маркера в html-списке?

Question 1

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

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

Question 2

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

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

<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 */
}

Question 3

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

Question 4

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

Если вам нужна эта функция, сделайте следующее:

Question 5

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

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

Question 6

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

Хорошо, дело в том, что вы должны указать внутренний тег, чтобы текст 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>

Question 7

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

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

Question 8

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

Question 9

Согласно спецификации W3C ,

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

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

Question 10

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

Question 11

Вы можете использовать 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
});

Question 12

Что касается вопроса 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 .

Question 13

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

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

Question 14

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

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

Question 15

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Один

Два

Три

Question 16

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

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

Question 17

Вы захотите установить «стиль списка» через CSS и присвоить ему значение color: value. Пример:

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

Answer 1

86

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

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

html css html-lists Дэйв Хейнс
источник

Я бы просто использовал изображение и избегал лишней разметки. Вероятно, это более эффективное решение

Сэм Мюррей-Саттон

8

Кого волнует такая "лишняя" разметка ... серьезно, вы ничего не потеряете, сделав это.

Answer 2

Я бы просто использовал изображение и избегал лишней разметки. Вероятно, это более эффективное решение

Сэм Мюррей-Саттон

Answer 3

8

Кого волнует такая "лишняя" разметка ... серьезно, вы ничего не потеряете, сделав это.

Answer 4

159

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

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

<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 */
}

Престаул
источник

Именно то, что мне нужно! У меня есть список ссылок, и к ссылкам в любом случае уже применен другой цветовой стиль.

Дэйв Хейнс,

Это не самый лучший способ сделать это. Например, это не сработает, если у вас есть cms с редактором WYSIWYG. Элементы не будут отображаться. Возможно, вы захотите поработать с: before и: after, не обращая внимания на самих быков. На самом деле это очень плохая практика.

Automagisch

2

@KoenHoutman, на момент написания этой статьи (2008 г.) это была единственная методика, получившая разумную поддержку. Даже сегодня это неплохая практика и по-прежнему является техникой с самой широкой поддержкой браузера, хотя я согласен с тем, что сегодня (в большинстве случаев) я бы предпочел использовать, :beforeкак в ответе Марка ниже.

Prestaul

Поскольку вы меняете только представление текста, bтег будет более подходящим.

Supuhstar

Answer 5

Именно то, что мне нужно! У меня есть список ссылок, и к ссылкам в любом случае уже применен другой цветовой стиль.

Дэйв Хейнс,

Answer 6

Это не самый лучший способ сделать это. Например, это не сработает, если у вас есть cms с редактором WYSIWYG. Элементы не будут отображаться. Возможно, вы захотите поработать с: before и: after, не обращая внимания на самих быков. На самом деле это очень плохая практика.

Automagisch

Answer 7

2

@KoenHoutman, на момент написания этой статьи (2008 г.) это была единственная методика, получившая разумную поддержку. Даже сегодня это неплохая практика и по-прежнему является техникой с самой широкой поддержкой браузера, хотя я согласен с тем, что сегодня (в большинстве случаев) я бы предпочел использовать, :beforeкак в ответе Марка ниже.

Prestaul

Answer 8

Поскольку вы меняете только представление текста, bтег будет более подходящим.

Supuhstar

Answer 9

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

Answer 10

Это более современный способ использования CSS3 по сравнению с принятым ответом

Минни

Answer 11

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

Если вам нужна эта функция, сделайте следующее:

Answer 12

6

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

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

Джонатан Аркелл
источник

Поскольку вы меняете только представление текста, bтег будет более подходящим.

Supuhstar

1

Когда это было написано, тег b считался устаревшим в пользу сильного тега. Но да, вы правы, теперь тег ab будет более подходящим.

Джонатан Аркелл

Answer 13

Поскольку вы меняете только представление текста, bтег будет более подходящим.

Supuhstar

Answer 14

1

Когда это было написано, тег b считался устаревшим в пользу сильного тега. Но да, вы правы, теперь тег ab будет более подходящим.

Джонатан Аркелл

Answer 15

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

Хорошо, дело в том, что вы должны указать внутренний тег, чтобы текст 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>

Answer 16

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

the_drow

Answer 17

2

Контрпункт к @the_drow, не устарел. stackoverflow.com/questions/1348683/…

Strixy 06

Answer 18

Установка цвета по умолчанию, применяемого к определенному селектору, устранила мою проблему. Спасибо за этот совет.

Дэвид

Answer 19

2

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

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

гр
источник

1

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

Zane

Вот один с кружком SVG, который можно легко раскрасить:

list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");

Ciantic

Answer 20

1

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

Zane

Answer 21

Вот один с кружком SVG, который можно легко раскрасить:

list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");

Ciantic

Answer 22

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

Answer 23

Согласно спецификации W3C ,

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

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

Answer 24

0

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

источник

Answer 25

Вы можете использовать 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
});

Answer 26

Что касается вопроса 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 .

Answer 27

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

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

Answer 28

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

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

Answer 29

-1

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Один

Два

Три

БотаникFury
источник

Answer 30

-2

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

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

Диодей - Джеймс Макфарлейн
источник

Да, я тоже так подумал ... но стиль li color меняет цвет текста, а также маркера.

Aeon

Answer 31

Да, я тоже так подумал ... но стиль li color меняет цвет текста, а также маркера.

Aeon

Answer 32

Вы захотите установить «стиль списка» через CSS и присвоить ему значение color: value. Пример:

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

Изменить цвет маркера в html-списке?

Ответы: