Есть ли простой способ изменить цвет маркера в списке?
-
09-06-2019 - |
Вопрос
Все, что я хочу, это иметь возможность изменить цвет маркера в списке на светло-серый.По умолчанию он черный, и я не могу понять, как это изменить.
Я знаю, что мог бы просто использовать изображение;Я бы предпочел не делать этого, если это в моих силах.
Решение
Маркер получает свой цвет из текста.Поэтому, если вы хотите, чтобы цвет маркера в вашем списке отличался от цвета текста, вам придется добавить некоторую разметку.
Оберните текст списка в промежуток:
<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 */
}
Другие советы
Я справился с этим без добавления разметки, но вместо этого использовал 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>
Это было невозможно в 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, Яндекс и др.):проблема звездного хрома
- Геккон (Firefox, Iceweasel и т.д.):Нажмите "(проголосовать)" на эту ошибку
Трезубец (IE, веб-просмотры Windows):Нажмите "Я тоже могу" в разделе "X пользователей могут воспроизвести эту ошибку".
Разработка Трезубца прекратилась- EdgeHTML (MS Edge, Windows web views, Windows Modern apps):Нажмите "Проголосовать" за этот prpopsal
- Веб-набор (Safari, Steam, WebOS и т.д.):ОБРАТИТЕ внимание на эту ошибку
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
большой проблемой этого метода является дополнительная наценка.(тег span)
Здравствуйте, возможно, этот ответ запоздалый, но является правильным для достижения этой цели.
Хорошо, дело в том, что вы должны указать внутренний тег, чтобы текст списка был обычным черным цветом (или каким бы вы ни хотели его получить).Но также верно и то, что вы можете ПЕРЕОПРЕДЕЛИТЬ любые ТЕГИ и внутренние теги с помощью CSS.Поэтому лучший способ сделать это - использовать более КОРОТКИЙ тег для переопределения
Подпишите это определение 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>
Просто сделайте маркер в графической программе и используйте list-style-image
:
ul {
list-style-image:url('gray-bullet.gif');
}
Оберните текст внутри элемента списка с помощью промежутка (или какого-либо другого элемента) и примените цвет маркера к элементу списка, а цвет текста - к промежутку.
Согласно Спецификация W3C,
Свойства списка ...не разрешайте авторам указывать отдельный стиль (цвета, шрифты, выравнивание и т.д.) Для маркера списка...
Но идея с промежутком внутри приведенного выше списка должна работать нормально!
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
Вы можете использовать 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 года, я подумал, что мог бы добавить более свежий и актуальный ответ о том, как вы могли бы изменить цвет маркеров в списке.
Если вы готовы использовать внешние библиотеки, Шрифт Awesome дает вам масштабируемые векторные иконки, а в сочетании с Вспомогательные классы Bootstrap (например. text-success
), вы можете составить несколько довольно интересных и настраиваемых списков.
Я расширил выдержку из страница примеров потрясающего списка шрифтов ниже:
Использование
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>
Шрифт Потрясающий (в основном) поддерживает 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;
}
Вы могли бы использовать CSS для достижения этой цели.Указав список в выбранном вами цвете и стиле, вы также можете указать текст другого цвета.
Следуйте примеру по адресу http://www.echoecho.com/csslists.htm.
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Просто используйте CSS:
<li style='color:#e0e0e0'>something</li>
Вы захотите установить "стиль списка" с помощью CSS и придать ему цвет:ценность.Пример:
ul.colored {list-style: color: green;}