Как установить цвета маркеров в списках HTML UL / LI через CSS без использования каких-либо изображений или тегов span
812823 просмотра
16 ответа
Представьте себе простой несортированный список с некоторыми <li>
элементами. Теперь я определил, что пули должны быть квадратной формы. list-style:square;
Однако, если я установлю цвет <li>
элементов, color: #F00;
то все станет красным!
Пока я только хочу установить цвет квадратных пуль. Есть ли элегантный способ определить цвет пуль в CSS ...
... без использования спрайтов и тегов span!
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
Автор: Sam
Источник
Размещён: 12.11.2019 09:41
Ответы (16)
1012 плюса
Наиболее распространенный способ сделать это что-то вроде этого:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• ";
color: red; /* or whatever color you prefer */
}
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
JSFiddle: http://jsfiddle.net/leaverou/ytH5P/
Будет работать во всех браузерах, включая IE от версии 8 и выше.
Автор: Lea Verou Размещён: 15.03.2011 07:4288 плюса
просматривая некоторое время назад, нашел этот сайт, вы пробовали эту альтернативу?
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
Звучит сложно, но вы можете сделать свой собственный PNG изображение / рисунок здесь , а затем скопировать / вставить код и настроить ваши пули =) кадры из фильма элегантных?
РЕДАКТИРОВАТЬ:
Следуя идее @ lea-verou для другого ответа и применяя эту философию улучшения внешних источников, я пришел к этому другому решению:
- вставьте в свою голову таблицу стилей библиотеки значков Webfont, в данном случае Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- взять код из FontAwesome Cheatsheet (или любые другие значки WebFont).
i.e.: fa-angle-right []
и используйте последнюю часть f ..., за которой следует число вроде этого, а font-family
также:
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
вот и все! теперь у вас есть собственные подсказки пули тоже =)
Автор: Facundo Colombier Размещён: 31.10.2012 02:4646 плюса
Я просто решаю эту проблему следующим образом, которая должна работать во всех браузерах:
HTML:
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>
CSS:
ul li{
color: red
}
ul li span{
color: blue;
}
Автор: mdthh
Размещён: 20.10.2013 01:31
45 плюса
Текущая спецификация модуля CSS 3 Lists определяет ::marker
псевдоэлемент, который будет делать именно то, что вы хотите; FF был протестирован, чтобы не поддерживать, ::marker
и я сомневаюсь, что у Safari или Opera есть. IE, конечно, его не поддерживает.
Так что сейчас единственный способ сделать это - использовать изображение с list-style-image
.
Я думаю, вы могли бы обернуть содержимое a li
с помощью a, span
а затем вы можете установить цвет каждого из них, но это кажется мне немного хакерским.
42 плюса
Один из способов сделать это является использование li:before
с content: ""
и укладки его в качестве inline-block
элемента.
Вот рабочий фрагмент кода:
ul {
list-style-type: none; /* no default bullets */
}
ul li {
font-family: Arial;
font-size: 18px;
}
ul li:before { /* the custom styled bullets */
background-color: #14CCBB;
border-radius: 50%;
content: "";
display: inline-block;
margin-right: 10px;
margin-bottom: 2px;
height: 10px;
width: 10px;
}
<ul>
<li>Swollen joints</li>
<li>Pain in hands and knees</li>
<li>Redness around joints</li>
<li>Constant fatigue</li>
<li>Morning stiffness in joints</li>
<li>High fevers</li>
<li>Rheumatoid nodules, which develop around joints</li>
</ul>
24 плюса
Еще одно решение - использовать :before
псевдоэлемент с border-radius: 50%
. Это будет работать во всех браузерах, включая IE 8 и выше.
Использование em
устройства позволяет реагировать на изменения размера шрифта. Вы можете проверить это, изменив размер окна jsFiddle.
ul {
list-style: none;
line-height: 1em;
font-size: 3vw;
}
ul li:before {
content: "";
line-height: 1em;
width: .5em;
height: .5em;
background-color: red;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
}
Вы даже можете поиграть с ним, box-shadow
чтобы создать несколько хороших теней, которые не будут хорошо смотреться с content: "• "
решением.
18 плюса
Я попробовал это, и все стало странно для меня. (CSS перестал работать после :after {content: "";}
части этого урока. Я обнаружил, что вы можете раскрасить пули, просто используя color:#ddd;
сам li
элемент.
Вот пример .
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
Автор: Benito
Размещён: 27.11.2012 06:30
17 плюса
Я использую jQuery для этого:
jQuery('li').wrapInner('<span class="li_content" />');
и с некоторыми CSS:
li { color: red; }
li span.li_content { color: black; }
может быть излишним, но это удобно, если вы пишете код для CMS и не хотите, чтобы ваши редакторы добавляли дополнительный интервал в каждый элемент списка.
Автор: Veerle Verbert Размещён: 04.06.2011 01:0110 плюса
Я бы порекомендовал дать LI
а background-image
и padding-left
. list-style-image
Атрибут странное поведения в среде кросса-браузер, и добавить дополнительный элемент, такие как интервал, является ненужным. Таким образом, ваш код будет выглядеть примерно так:
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
Автор: Philip Schweiger
Размещён: 15.03.2011 02:05
9 плюса
Самое простое, что вы можете сделать - это обернуть содержимое <li>
в <span>
или в эквивалент, тогда вы можете установить цвет независимо.
В качестве альтернативы, вы можете сделать изображение с нужным цветом маркера и установить его с помощью list-style-image
свойства.
8 плюса
Вариант решения Lea Verou с идеальным отступом в многострочных записях может выглядеть примерно так:
ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
li{
padding-left: 1.5em;
}
li:before {
position: absolute;
content: "•";
color: red;
left: 0;
}
Автор: David
Размещён: 25.11.2013 02:16
6 плюса
Я добавляю свое решение этой проблемы.
Я не хочу использовать изображение, и валидатор накажет вас за использование отрицательных значений в CSS, поэтому я иду по этому пути:
ul { list-style:none; padding:0; margin:0; }
li { padding-left:0.75em; position:relative; }
li:before { content:"•"; color:#e60000; position:absolute; left:0em; }
Автор: Kovo
Размещён: 08.02.2014 10:58
5 плюса
Я знаю, что это немного поздний ответ на этот пост, но для справки ...
CSS
ul {
color: red;
}
li {
color: black;
}
Цвет маркера определяется тегом ul, а затем мы переключаем цвет li обратно.
Автор: webster76 Размещён: 26.07.2013 10:003 плюса
Взяв демонстрацию Леа, мы предлагаем другой способ создания неупорядоченных списков с границами: http://jsfiddle.net/vX4K8/7/
HTML
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<ul>
<li>Son</li>
<li>Of</li>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style: none;
margin: 0;
}
ul:first-child {
padding: 0;
}
li {
line-height: 180%;
border-bottom: 1px dashed #CCC;
margin-left: 14px;
text-indent: -14px;
}
li:last-child {
border: none;
}
li:before {
content: "";
border-left: 4px solid #CCC;
padding-left: 10px;
}
Автор: user2188875
Размещён: 13.11.2013 12:50
3 плюса
Решение Lea Verous хорошо, но я хотел больше контролировать положение пуль, так что это мой подход:
.entry ul {
list-style: none;
padding: 0;
margin: 0;
/* hide overflow in the case of floating elements around ... */
overflow: hidden;
}
.entry li {
position: relative;
padding-left: 24px;
}
.entry li:before {
/* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
position: absolute;
content: "• ";
color: #E94E24;
font-size: 30px;
left: 0;
/* use fonts like "arial" or use "sans-serif" to make the dot perfect round */
font-family: Arial, sans-serif;
}
Автор: Henning Fischer
Размещён: 11.09.2015 12:54
-14 плюса
Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css3 Как я могу изменить порядок моих div с CSS?
- css3 Как заставить div заполнить оставшееся горизонтальное пространство?
- css3 Как нарисовать вертикальный текст с помощью кросс-браузера CSS?
- layout BoxLayout не может быть общей ошибкой
- layout Усечение длинных строк с помощью CSS: возможно?
- layout Получить размеры экрана в пикселях
- layout Андроид LinearLayout
- colors Функция для создания цветовых колес
- colors Алгоритм случайного генерирования эстетически приятной цветовой палитры
- colors Симулятор дальтонизма
- colors Как выделить и портировать вывод gdb во время интерактивной отладки?
- html-lists Можно ли указать начальный номер для упорядоченного списка?
- html-lists Как сделать отображение <ul> в горизонтальном ряду
- html-lists Лучшая практика предоставления заголовка, заголовка или метки для списка в HTML