我想知道是否有办法改变列表中子弹的颜色.
我有一个这样的列表:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
我不可能在li中插入任何内容,例如'span'og a'p'.那么我能以某种聪明的方式改变子弹的颜色而不是文本吗？
Mar*_*arc 182
我管理这个没有添加标记,而是使用li:before.这显然具有所有限制:before(没有旧的IE支持),但它似乎适用于IE8,Firefox和Chrome经过一些非常有限的测试.子弹样式也受到unicode内容的限制.
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: '\2022';
/* For a square bullet */
/*content:'\25A0';*/
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>rah*_*hul 34
如果您可以使用图像,那么您可以这样做.如果没有图像,您将无法仅更改项目符号的颜色,也无法更改文本.
使用图像
li { list-style-image: url(images/yourimage.jpg); }
看到
不使用图像
然后,您必须编辑HTML标记并在列表中包含一个范围,并使用不同的颜色为li和span着色.
Jon*_*ell 19
我们可以结合list-style-image使用svgS,我们可以在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可以粘在那里!看看下面的靶心示例:
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设置属性<svg>,否则它们不会显示任何内容.在撰写本文时,最新版本的Firefox出现了这个问题.我在示例中设置了两个属性.
最近的一条评论让我想起了数据的编码.这对我来说是一个痛点,我可以分享一些我研究过的信息.
引用URI规范的data-uri规范说svg应该根据URI规范进行编码.这意味着应该对所有类型的字符进行编码,例如变为.<%3C
一些来源建议使用base64编码,这应该可以解决编码问题,但是它会不必要地增加SVG的大小,而URI编码却不会.我建议使用URI编码.
jes*_*ica 15
建立@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;
}
小智 9
我知道这是一个非常非常古老的问题,但我正在玩这个,并提出了一种我没见过的方式.为列表指定一种颜色,然后使用::first-line选择器覆盖文本颜色.我不是专家,所以也许我错过了这种方法有问题,但似乎有效.
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>建立@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
您可以使用::markerCSS 伪元素来选择列表项的标记框（即项目符号或数字）。
ul li::marker {
color: red;
}
注意：在发布此答案时，这被认为是实验性技术，并且仅在 Firefox 和 Safari 中实现（到目前为止）。