在不使用跨度的情况下更改 HTML 列表的项目符号颜色

Question

提问by Kim Andersen

I was wondering if there is a way to change the color on the bullets in a list.

我想知道是否有办法更改列表中项目符号的颜色。

I have a list like this:

我有一个这样的清单：

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

It is not possible for me to insert anything in the li's such as a 'span' og a 'p'. So can I change the color of the bullets but not the text in some smart way?

我不可能在 li 中插入任何内容，例如“跨度”或“p”。那么我可以以某种聪明的方式更改项目符号的颜色而不是文本吗？

Answer 1

采纳答案by rahul

If you can use an image then you can do this. And without an image you won't be able to change the color of the bullets only and not the text.

如果您可以使用图像，则可以执行此操作。如果没有图像，您将无法仅更改项目符号的颜色，而不能更改文本。

Using an image

使用图像

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

See

看

list-style-image

列表样式图像

Without using an image

不使用图像

Then you have to edit the HTML markup and include a span inside the list and color the li and span with different colors.

然后你必须编辑 HTML 标记并在列表中包含一个跨度，并用不同的颜色为 li 和跨度着色。

Answer 2

回答by Marc

I managed this without adding markup, but instead using li:before. This obviously has all the limitations of :before(no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. The bullet style is also limited by what's in unicode.

我在没有添加标记的情况下进行了管理，而是使用li:before. 这显然具有:before（没有旧的 IE 支持）的所有限制，但经过一些非常有限的测试后，它似乎适用于 IE8、Firefox 和 Chrome。子弹样式也受 unicode 内容的限制。

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '22';
  /* For a square bullet */
  /*content:'A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

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

Answer 3

回答by Jon Surrell

We can combine list-style-imagewith svgs, which we can inline in css! This method offers incredible control over the "bullets", which can become anything.

我们可以list-style-image与svgs结合，我们可以在 css 中内联！这种方法提供了对“子弹”的难以置信的控制，它可以变成任何东西。

To get a red circle, just use the following 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>');
}

But this is just the beginning. This allows us to do any crazy thing we want with those bullets. circles or rectangles are easy, but anything you can draw with svgyou can stick in there! Check out the bullseye example below:

但这只是开始。这使我们可以用这些子弹做任何我们想做的疯狂的事情。圆形或矩形很容易，但你可以画的任何东西都svg可以粘在那里！查看下面的靶心示例：

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="5"/></svg>');
}
ul 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"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul 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="3"/></svg>');
}
ul ul ul 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"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  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="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Width/height attributes

宽度/高度属性

Some browsers require widthand heightattributes to be set on the <svg>, or they display nothing. At time of writing, recent versions of Firefox exhibit this problem. I've set both attributes in the examples.

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

Encodings

编码

A recent comment reminded me of encodings for the data-uri. This was a pain-point for me recently, and I can share a bit of information I've researched.

最近的评论让我想起了 data-uri 的编码。这是我最近的一个痛点，我可以分享一些我研究过的信息。

The data-uri spec, which references the URI spec, says that the svg should be encoded according to the URI spec. That means all sorts of characters should be encoded, eg <becomes %3C.

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

Some sources suggest base64 encoding, which should fix encoding issues, however it will unnecessarily increase the size of the SVG, whereas URI encoding will not. I recommend URI encoding.

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

More info:

回答by jessica

Building off @Marc's solution -- since the bullet character is rendered differently with different fonts and browsers, I used the following css3 technique with border-radius to make a bullet that I have more control over:

建立@Marc 的解决方案——由于子弹字符在不同的字体和浏览器中呈现不同，我使用了以下带有边框半径的 css3 技术来制作我可以更好地控制的子弹：

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

Answer 5

回答by Lasse J?rgensen

I know this is a really, really, old question but i was playing around with this and came up with a way i have not seen posted. Give the list a color and then overwrite the text color using ::first-lineselector. I'm no expert so maybe there is something wrong with this approach that I'm missing, but it seems to work.

我知道这是一个非常非常古老的问题，但我一直在尝试解决这个问题，并想出了一种我从未见过的方法。给列表一个颜色，然后使用::first-line选择器覆盖文本颜色。我不是专家，所以也许我缺少的这种方法有问题，但它似乎有效。

li {
  color: blue;
}

li::first-line {
  color: black;
}

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

Answer 6

回答by ddilsaver

Building off both @Marc and @jessica solutions - This is the solution that I use:

建立@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;
}

I use emfor font sizes so if you set your topvalue to be .5emit will always be placed to the mid point of your first line of text. I used left:-20pxbecause that is the default position of bullets in browsers: parent padding/2

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

Answer 7

回答by Beverly Lodge

I really liked Marc's answer too - I needed a set of different colored ULs and obviously it would be easier just to use a class. Here is what I used for orange, for example:

我也非常喜欢 Marc 的回答——我需要一组不同颜色的 UL，显然只使用一个类会更容易。以下是我用于橙色的内容，例如：

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

Plus, I found that the hex code I used for "content:" was different than Marc's (that hex circle seemed to sit a bit too high). The one I used seems to sit perfectly in the middle. I also found several other shapes (squares, triangles, circles, etc.) right here

另外，我发现我用于“内容：”的十六进制代码与 Marc 的不同（那个十六进制圆圈似乎有点太高了）。我用的那个似乎正好坐在中间。我还发现了其他几个形状（正方形，三角形，圆形等）就在这里

Answer 8

回答by Grant Miller

::marker

::标记

You can use the ::markerCSS pseudo-element to select the marker box of a list item (i.e. bullets or numbers).

您可以使用::markerCSS 伪元素来选择列表项（即项目符号或数字）的标记框。

ul li::marker {
  color: red;
}

Note:At the time of posting this answer, this is considered experimental technology and has only been implemented in Firefox and Safari (so far).

注意：在发布此答案时，这被认为是实验性技术，仅在 Firefox 和 Safari 中实现（到目前为止）。

Answer 9

回答by jmarceli

For me the best option is to use CSS pseudo elements, so for discbullet styling it would look like that:

对我来说，最好的选择是使用 CSS 伪元素，因此对于disc项目符号样式，它看起来像这样：

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Notes:

笔记：

widthand heightshould have equal values to keep pointers rounded
you may set border-radiusto zero if you want to have squarelist bullets

width并且height应该具有相等的值以保持指针四舍五入
border-radius如果你想要square列表项目符号，你可以设置为零

For more bullets styles you may use other css shapes https://css-tricks.com/examples/ShapesOfCSS/(choose this which doesn't require pseudo elements to work, so for example triangles)

对于更多项目符号样式，您可以使用其他 css 形状https://css-tricks.com/examples/ShapesOfCSS/（选择不需要伪元素即可工作的选项，例如三角形）

Answer 10

回答by James Whittred

Building on @ddilsaver's answer. I wanted to be able to use a sprite for the bullet. This appears to work:

基于@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 */
}

在不使用跨度的情况下更改 HTML 列表的项目符号颜色

提问by Kim Andersen

采纳答案by rahul

回答by Marc

回答by Jon Surrell

Width/height attributes

宽度/高度属性

Encodings

编码

More info:

更多信息：

回答by jessica

回答by Lasse J?rgensen

回答by ddilsaver

回答by Beverly Lodge

回答by Grant Miller

::marker

::标记

回答by jmarceli

回答by James Whittred

相关推荐

最近更新

标签

在不使用跨度的情况下更改 HTML 列表的项目符号颜色

提问by Kim Andersen

采纳答案by rahul

回答by Marc

回答by Jon Surrell

Width/height attributes

宽度/高度属性

Encodings

编码

More info:

更多信息：

回答by jessica

回答by Lasse J?rgensen

回答by ddilsaver

回答by Beverly Lodge

回答by Grant Miller

::marker

::标记

回答by jmarceli

回答by James Whittred

相关推荐

Html 相同大小的表格单元格以填充包含表格的整个宽度

Html 水平对齐按钮

Html angularjs中的textarea和input类型文本有什么区别

Html 什么是 ？

相关推荐

最近更新

标签

Html 什么是？