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

этот вопрос уже есть ответ здесь:

представьте себе простой несортированный список с некоторыми <li> предметы. Теперь я определил, что пули должны быть квадратной формы через list-style:square; однако, если я установлю цвет <li> предметы color: #F00; затем все становится красным!

в то время как я хочу только установить цвет квадратных пуль. Есть ли элегантный способ чтобы определить цвет пуль в CSS...

...без использования изображений sprite и тегов span!

HTML-код

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

в CSS

li{
   list-style:square;
}

16 ответов


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

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 и выше.


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

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

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

EDIT:

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

  1. вставьте в голову таблицу стилей библиотеки значков Webfont, в этом случае шрифт 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;
}

и это все! теперь у вас есть собственные советы пуля too =)

скрипка


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

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

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


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

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

один из способов сделать это с помощью li:before С content: "" и стиль его как inline-block элемент.

вот фрагмент рабочего кода:

ul {
  list-style-type: none; /* no default bullets */
}

li { 
  font-family: Arial;
  font-size: 18px;
}

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>

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


Я использую jQuery для этого:

jQuery('li').wrapInner('<span class="li_content" />');

& С некоторыми CSS:

li { color: red; }
li span.li_content { color: black; }

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


я попробовал это, и все стало для меня странным. (css перестал работать после :after {content: "";} часть этого руководства. Я обнаружил, что вы можете покрасить пули, просто используя color:#ddd; на товар.

здесь пример.

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

Я бы рекомендовал дать LI a background-image и padding-left. The list-style-image атрибут flakey в кросс-браузерных средах, и добавление дополнительного элемента, такого как span, является излишним. Так что ваш код будет выглядеть примерно так:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

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

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


вариация Леа 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;
}

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

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

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

в CSS

ul {
    color: red;
}

li {
    color: black;
}

цвет пули определен на бирке ul и после этого мы переключаем цвет li назад.


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

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

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

li{
  color: #fff;
}