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

css css3 layout colors html-lists

812823 просмотра

16 ответа

5667 Репутация автора

Представьте себе простой несортированный список с некоторыми <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 Источник Размещён: 15.03.2011 01:50

Ответы (16)


45 плюса

43482 Репутация автора

Текущая спецификация модуля CSS 3 Lists определяет ::marker псевдоэлемент, который будет делать именно то, что вы хотите; FF был протестирован, чтобы не поддерживать, ::markerи я сомневаюсь, что у Safari или Opera есть. IE, конечно, его не поддерживает.

Так что сейчас единственный способ сделать это - использовать изображение с list-style-image.

Я думаю, вы могли бы обернуть содержимое a liс помощью a, spanа затем вы можете установить цвет каждого из них, но это кажется мне немного хакерским.

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

9 плюса

2418 Репутация автора

Самое простое, что вы можете сделать - это обернуть содержимое <li>в <span>или в эквивалент, тогда вы можете установить цвет независимо.

В качестве альтернативы, вы можете сделать изображение с нужным цветом маркера и установить его с помощью list-style-imageсвойства.

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

10 плюса

2399 Репутация автора

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

1012 плюса

18639 Репутация автора

Решение

Наиболее распространенный способ сделать это что-то вроде этого:

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

17 плюса

243 Репутация автора

Я использую 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

88 плюса

2567 Репутация автора

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

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

18 плюса

189 Репутация автора

Я попробовал это, и все стало странно для меня. (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

5 плюса

83 Репутация автора

Я знаю, что это немного поздний ответ на этот пост, но для справки ...

CSS

ul {
    color: red;
}

li {
    color: black;
}

Цвет маркера определяется тегом ul, а затем мы переключаем цвет li обратно.

Автор: webster76 Размещён: 26.07.2013 10:00

46 плюса

915 Репутация автора

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

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

3 плюса

0 Репутация автора

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

8 плюса

1867 Репутация автора

Вариант решения 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

24 плюса

12255 Репутация автора

Еще одно решение - использовать :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

6 плюса

150 Репутация автора

Я добавляю свое решение этой проблемы.

Я не хочу использовать изображение, и валидатор накажет вас за использование отрицательных значений в 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

-14 плюса

0 Репутация автора

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

li{
  color: #fff;
}
Автор: user3790264 Размещён: 10.11.2014 03:09

42 плюса

11366 Репутация автора

Один из способов сделать это является использование 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

3 плюса

969 Репутация автора

Решение 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
Вопросы из категории :
32x32