Change markers color in HTML list without using range

Question

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

I have a list like this:

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

It is not possible to insert anything into li, for example, 'span' og a 'p'. Can I change the color of the bullets, but not the text in some smart way?

Answer 1

If you can use an image, you can do it. And without an image, you cannot change the color of just a bullet, not text.

Using image

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

Cm

list-style-image

Without using an image

Then you need to edit the HTML markup and enable the span inside the list and whether to color the range with different colors.

Answer 2

I succeeded without adding markup, but use li:before instead. Obviously, it has all the limitations :before (without the old IE support), but it seems to work with IE8, Firefox, and Chrome after very limited testing. The style of the bullet is also limited by what is in 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> 

Answer 3

We can combine list-style-image with svg s, which we can embed in css! This method offers incredible control over “bullets” that can become anything.

To get the red circle, use only the following 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 only the beginning. This allows us to do any crazy thing we want with these bullets. circles or rectangles are simple, but anything you can draw with svg can be pasted there! See the apple apple example below:

 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 width and height attributes for <svg> , or they do not display anything. At the time of this writing, the latest versions of Firefox demonstrate this problem. I set both attributes in the examples.

Encodings

A recent comment reminded me of the encodings for data-uri. This has been a problem for me lately, and I can share the information I researched.

the uri data specification , which refers to the URI specification , says that svg should be encoded according to browser support: ie8

css tricks on svgs

mdn on svgs

Answer 4

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

 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

I know this is a really, really, old question, but I played with it and came up with a way that I did not see. Give the list a color, and then overwrite the color of the text with the ::first-line selector. I am not an expert, so maybe something is wrong with this approach, which I am missing, but it works.

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

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

Answer 6

Creating both @Marc and @jessica solutions is the solution I use:

 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 em for font sizes, so if you set top to .5em , it will always be placed in the middle of your first line of text. I used left:-20px because this is the default position of markers in browsers: parent padding/2

Answer 7

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

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

Also, I found that the hex code I used for "content:" was different from Marc (this hex circle seemed too high). The one I used seems to be sitting perfectly in the middle. I also found several other shapes (squares, triangles, circles, etc.) right here

Answer 8

For me, it’s best to use CSS pseudo-elements, so for the t20> bullet style it will look like this:

 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:

• width and height must have equal values ​​to preserve rounded pointers.
• you can set border-radius to zero if you want to have a square list of markers

For more bullet styles, you can use other css forms https://css-tricks.com/examples/ShapesOfCSS/ (select this, which does not require pseudo-elements, so for example triangles)

Answer 9

:: Marker

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

 ul li::marker { color: red; } 

Note: At the time of publication of this answer, this was considered an experimental technology and was only implemented in Firefox and Safari (for now).

Answer 10

Based on @ddilsaver answer. I wanted to be able to use a sprite for a bullet. It works:

 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 */ } 

Answer 11

I tried it today and printed this:
I needed to display colored markers in my lists (both markers and numbers). I came across this tip and wrote in my stylesheet where the properties are indicated:

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

I chose another character to display the bullet, watching it here . I needed to adjust the fields accordingly, maybe the values ​​will not apply to the font of your choice (numbers use your web font).

Answer 12

Try using this instead:

 ul { color: red; }