Все, що я хочу, - це мати можливість змінити колір кулі у списку на світло-сірий. За замовчуванням чорний, і я не можу зрозуміти, як його змінити.
Я знаю, що міг би просто використати зображення; Я волів би цього не робити, якщо зможу допомогти.
Відповіді:
Куля отримує свій колір із тексту. Отже, якщо ви хочете мати інший кольоровий маркер, ніж текст у вашому списку, вам доведеться додати розмітку.
Оберніть текст списку в інтервал:
<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 */
}
:beforeвирішив використовувати, як у відповіді Марка нижче.
bтег буде більш доречним.
Мені це вдалося без додавання розмітки, а замість цього використовуючи 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 і поки не працює в жодному з основних браузерів.
Якщо ви хочете цю функцію, виконайте такі дії:
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
великою проблемою цього методу є додаткова розмітка. (тег span)
bтег буде більш доречним.
Привіт, можливо, ця відповідь запізнилася, але є правильною для досягнення цього.
Гаразд, справа в тому, що ви повинні вказати внутрішній тег, щоб текст 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>
Просто зробіть маркер у графічній програмі та використовуйте list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
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");
Оберніть текст усередині елемента списку прольотом (або іншим елементом) і застосуйте колір маркера до елемента списку, а колір тексту - до прольоту.
Відповідно до специфікації 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 року, я думав, що можу додати більш свіжу та актуальну відповідь про те, як можна змінити колір кульок у списку.
Якщо ви бажаєте використовувати зовнішні бібліотеки, Font 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>Шрифт 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;
}
Ви можете використовувати CSS для досягнення цього. Вказавши список у кольорі та стилі на ваш вибір, ви також можете вказати текст як інший колір.
Дотримуйтесь прикладу на веб- сайті http://www.echoecho.com/csslists.htm .
Просто використовуйте CSS:
<li style='color:#e0e0e0'>something</li>