Как установить цвета маркеров в списках HTML UL / LI через CSS без использования каких-либо изображений или тегов span

css css3 layout colors html-lists

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:42

88 плюса

просматривая некоторое время назад, нашел этот сайт, вы пробовали эту альтернативу?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

Звучит сложно, но вы можете сделать свой собственный PNG изображение / рисунок здесь , а затем скопировать / вставить код и настроить ваши пули =) кадры из фильма элегантных?

РЕДАКТИРОВАТЬ:

Следуя идее @ lea-verou для другого ответа и применяя эту философию улучшения внешних источников, я пришел к этому другому решению:

  1. вставьте в свою голову таблицу стилей библиотеки значков Webfont, в данном случае Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  1. взять код из FontAwesome Cheatsheet (или любые другие значки WebFont).
i.e.:
fa-angle-right [&#xf105;]

и используйте последнюю часть 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:46

46 плюса

Я просто решаю эту проблему следующим образом, которая должна работать во всех браузерах:

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а затем вы можете установить цвет каждого из них, но это кажется мне немного хакерским.

Автор: Alex Размещён: 15.03.2011 01:55

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>

Автор: Rahul Desai Размещён: 03.08.2015 10:36

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

jsFiddle

Вы даже можете поиграть с ним, box-shadowчтобы создать несколько хороших теней, которые не будут хорошо смотреться с content: "• "решением.

Автор: Jose Rui Santos Размещён: 04.12.2013 07:06

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:01

10 плюса

Я бы порекомендовал дать 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свойства.

Автор: Adam Bryzak Размещён: 15.03.2011 01:56

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:00

3 плюса

Взяв демонстрацию Леа, мы предлагаем другой способ создания неупорядоченных списков с границами: 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 плюса

Это сделает это ..

li{
  color: #fff;
}
Автор: user3790264 Размещён: 10.11.2014 03:09
Вопросы из категории :
32x32