Изменить цвет маркера в списке html?
Все, что мне нужно, это иметь возможность изменить цвет маркера в списке на светло-серый. По умолчанию он черный, и я не могу понять, как его изменить.
Я знаю, что могу просто использовать изображение; Я бы предпочел не делать этого, если смогу.
Кого волнует такая "лишняя" разметка ... серьезно, вы ничего не потеряете, сделав это.
Ответы 16
<ul>
<li style = "color: #888;"><span style = "color: #000">test</span></li>
</ul>
Большая проблема этого метода - дополнительная разметка. (тег span)
Поскольку вы меняете только представление текста, тег b будет более подходящим.
Когда это было написано, тег b считался устаревшим в пользу сильного тега. Но да, вы правы, теперь тег b был бы более подходящим.
Оберните текст в элементе списка диапазоном (или каким-либо другим элементом) и примените цвет маркера к элементу списка, а цвет текста - к диапазону.
Вы захотите установить «стиль списка» через CSS и присвоить ему значение color: value. Пример:
ul.colored {list-style: color: green;}
Просто используйте CSS:
<li style='color:#e0e0e0'>something</li>
Да, я тоже так думал ... но стиль li color меняет цвет текста, а также маркера.
Цвет маркера определяется текстом. Поэтому, если вы хотите, чтобы в вашем списке была маркировка, отличная от текста, вам нужно будет добавить разметку.
Оберните текст списка в диапазон:
<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. Элементы <span> не будут отображаться. Возможно, вы захотите поработать с: before и: after, не обращая внимания на самих быков. На самом деле это очень плохая практика.
@KoenHoutman, на момент написания этой статьи (2008 г.) это была единственная методика, пользующаяся разумной поддержкой. Даже сегодня это неплохая практика, и это все еще метод с самой широкой поддержкой браузеров, хотя я согласен, что сегодня (в большинстве случаев) я бы выбрал использование :before, как в ответе Марка ниже.
Поскольку вы меняете только представление текста, тег b будет более подходящим.
Согласно Спецификация W3C,
The list properties ... do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker ...
Но идея с диапазоном внутри списка выше должна работать нормально!
<ul style = "color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul>
<li style = "color:#ddd;"><span style = "color:#000;">List Item</span></li>
</ul>
Для этого вы можете использовать CSS. Указав для списка цвет и стиль по вашему выбору, вы также можете указать текст другого цвета.
Следуйте примеру на http://www.echoecho.com/csslists.htm.
Здравствуйте, возможно, этот ответ запоздал, но он правильный.
Хорошо, дело в том, что вы должны указать внутренний тег, чтобы текст 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>
вы должны использовать <span>. кроме того, <b> устарел.
Контрпункт к @the_drow, <b> не устарел. stackoverflow.com/questions/1348683/…
Установка цвета по умолчанию, применяемого к определенному селектору, устранила мою проблему. Спасибо за этот совет.
Я справился с этим без добавления разметки, а вместо этого использовал 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:'22';
/* For a square bullet */
/*content:'A0';*/
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>
Это более современный способ с CSS3 по сравнению с принятым ответом
Просто сделайте пулю в графической программе и используйте list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
ОП явно не хотел использовать изображение, но я наткнулся на это в поисках общего способа заменить пулю. Так что я думаю, что этот ответ хорош для полноты.
Вот один с кружком 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");
Вы можете использовать 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
});
Это было невозможно в 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 */
}
Однако обратите внимание, что по состоянию на июль 2016 г., это решение является только частью рабочего проекта W3C и пока не работает ни в каких основных браузерах.
Если вам нужна эта функция, сделайте следующее:
- Мигать (Chrome, Opera, Vivaldi, Яндекс и т. д.): Проблема с звездочкой Chromium
- Геккон (Firefox, Iceweasel и т. д.): Нажмите «(проголосовать)» по этой ошибке.
Трезубец (IE, веб-представления Windows): нажмите «Я тоже могу» в разделе «Пользователи X могут воспроизвести эту ошибку»
Trident development has ceased- EdgeHTML (MS Edge, веб-представления Windows, современные приложения Windows): нажмите «Голосовать» в этом предложении.
- Webkit (Safari, Steam, WebOS и т. д.): Зафиксируйте себя на этой ошибке
На вопрос 2008 года я подумал, что могу добавить более свежий и актуальный ответ о том, как вы можете изменить цвет маркеров в списке.
Если вы хотите использовать внешние библиотеки, Font Awesome предоставляет масштабируемые векторные иконки, и в сочетании с Вспомогательные классы Bootstrap (например, text-success), вы можете создать несколько довольно крутых и настраиваемых списков.
Я расширил отрывок из страница примеров списка Font Awesome ниже:
Use
fa-ulandfa-lito easily replace default bullets in unordered lists.
<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>Шрифт Awesome (в основном) поддерживает IE8 поддерживает только IE7, если вы используете более старая версия 3.2.1.
Это также работает, если мы установим цвет для каждого элемента, например: Я добавил немного маржи к левому краю.
<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;
}
Я бы просто использовал изображение и избегал лишней разметки. Вероятно, это более эффективное решение