css - 在不使用span的情况下更改HTML列表的项目符号颜色

我想知道是否有办法改变列表中子弹的颜色。

我有一个这样的列表:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

我不可能在li中插入任何内容,例如'span'og a'p'。 那么我能以某种聪明的方式改变子弹的颜色而不是文本吗?

Kim Andersen asked 2019-09-10T14:34:53Z
10个解决方案
182 votes

我管理这个没有添加标记,而是使用<ul> <li>foo</li> <li>bar</li> </ul>.这显然有:before(没有旧的IE支持)的所有限制,但它似乎与IE8,Firefox和Chrome经过一些非常有限的测试后。 子弹样式也受到unicode内容的限制。

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Marc answered 2019-09-10T14:36:20Z
34 votes

如果您可以使用图像,那么您可以这样做。 如果没有图像,您将无法仅更改项目符号的颜色,也无法更改文本。

使用图像

li { list-style-image: url(images/yourimage.jpg); }

看到

列表样式图像

不使用图像

然后,您必须编辑HTML标记并在列表中包含一个范围,并使用不同的颜色为li和span着色。

rahul answered 2019-09-10T14:35:44Z
19 votes

我们可以结合<%3Cs,我们可以在css中内联! 这种方法提供了令人难以置信的“子弹”控制,它可以成为任何东西。

要获得一个红色圆圈,只需使用以下css:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

但这只是一个开始。 这允许我们用这些子弹做任何我们想要的疯狂事情。 圆形或矩形很容易,但你可以用<绘制的任何东西都可以粘在那里! 看看下面的靶心示例:

<
<

宽度/高度属性

某些浏览器需要在<svg>上设置<%3C属性,否则它们不显示任何内容。 在撰写本文时,最新版本的Firefox出现了这个问题。 我在示例中设置了两个属性。

编码

最近的一条评论让我想起了数据的编码。 这对我来说是一个痛点,我可以分享一些我研究过的信息。

引用URI规范的data-uri规范说svg应该根据URI规范进行编码。 这意味着应对所有类型的字符进行编码,例如<变为%3C

一些来源建议使用base64编码,这应该可以解决编码问题,但是它会不必要地增加SVG的大小,而URI编码却不会。 我建议使用URI编码。

更多信息:

浏览器支持:> ie8

sss上的css技巧

svgs上的mdn

Jon Surrell answered 2019-09-10T14:38:29Z
15 votes

建立@Marc的解决方案 - 由于子弹角色以不同的字体和浏览器呈现不同,我使用以下css3技术和border-radius来制作一个我可以更多控制的子弹:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}
jessica answered 2019-09-10T14:38:58Z
8 votes

我知道这是一个非常非常古老的问题,但我正在玩这个,并提出了一种我没见过的方式。 为列表指定一种颜色,然后使用<ul> <li>House</li> <li>Car</li> <li>Garden</li> </ul>选择器覆盖文本颜色。 我不是专家,所以也许我错过了这种方法有问题,但似乎有效。

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>
<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Lasse Jørgensen answered 2019-09-10T14:39:41Z
6 votes

建立@Marc和@jessica解决方案 - 这是我使用的解决方案:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

我使用em作为字体大小,因此如果将top的值设置为.5em,它将始终位于第一行文本的中点。 我使用left:-20px,因为这是浏览器中项目符号的默认位置:parent padding/2

ddilsaver answered 2019-09-10T14:40:24Z
2 votes

我真的很喜欢Marc的答案 - 我需要一套不同颜色的UL,显然使用一个类更容易。 这是我用于橙色的东西,例如:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

另外,我发现我用于“内容:”的十六进制代码与Marc不同(六角形圆圈看起来有点太高)。 我用的那个似乎完全坐在中间。 我还在这里找到了其他几种形状(正方形,三角形,圆形等)

Beverly Lodge answered 2019-09-10T14:41:00Z
1 votes

对我来说,最好的选择是使用CSS伪元素,因此对于border-radius子弹样式,它看起来像这样:

border-radius
border-radius

笔记:

  • border-radiussquare应具有相同的值以保持指针四舍五入
  • 如果你想要square列表项目符号,你可以将border-radius设置为零

对于更多项目符号样式,您可以使用其他CSS形状[https://css-tricks.com/examples/ShapesOfCSS/](选择不需要伪元素的项目,例如三角形)

jmarceli answered 2019-09-10T14:42:30Z
0 votes

建立在@ddilsaver的答案之上。 我希望能够使用精灵作为子弹。 这似乎有效:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}
James Whittred answered 2019-09-10T14:42:59Z
0 votes

我今天尝试了这个并输入了这个:
我需要在列表中显示颜色标记(子弹和数字)。 我发现了这个提示并在我的样式表中写入了属性的相互作用:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

我选择了一个不同的角色来展示一颗子弹,在这里观看。 我需要相应地调整边距,可能这些值不适用于您选择的字体(数字使用您的webfont)。

Mars answered 2019-09-10T14:43:49Z
translate from https://stackoverflow.com:/questions/1470214/change-bullets-color-of-an-html-list-without-using-span