[ACCEPTED]-Change bullets color of an HTML list without using span-css

Accepted answer
Score: 189

I managed this without adding markup, but 5 instead using li:before. This obviously has all the 4 limitations of :before (no old IE support), but 3 it seems to work with IE8, Firefox and Chrome 2 after some very limited testing. The bullet 1 style is also limited by what's 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>
Score: 35

If you can use an image then you can do 6 this. And without an image you won't be 5 able to change the color of the bullets 4 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 3 edit the HTML markup and include a span 2 inside the list and color the li and span 1 with different colors.

Score: 19

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

To 22 get a red circle, just use the following 21 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 20 allows us to do any crazy thing we want 19 with those bullets. circles or rectangles 18 are easy, but anything you can draw with 17 svg you can stick in there! Check out the bullseye 16 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 15 height attributes to be set on the <svg>, or they display 14 nothing. At time of writing, recent versions 13 of Firefox exhibit this problem. I've set 12 both attributes in the examples.

Encodings

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

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

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

More info:

browser-support: >ie8

css tricks on svgs

mdn on svgs

Score: 16

Building off @Marc's solution -- since the 5 bullet character is rendered differently 4 with different fonts and browsers, I used 3 the following css3 technique with border-radius 2 to make a bullet that I have more control 1 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;
}
Score: 12

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

li {
  color: blue;
}

li::first-line {
  color: black;
}
<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>
Score: 6

Building off both @Marc and @jessica solutions 6 - This is the solution that 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 5 em for font sizes so if you set your top value 4 to be .5em it will always be placed to the mid 3 point of your first line of text. I used 2 left:-20px because that is the default position of 1 bullets in browsers: parent padding/2

Score: 4

::marker

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

ul li::marker {
  color: red;
}

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

Score: 2

I really liked Marc's answer too - I needed 8 a set of different colored ULs and obviously 7 it would be easier just to use a class. Here 6 is what I used for 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;
}

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

Score: 1

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

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 should have equal values to keep pointers rounded
  • you may set border-radius to zero if you want to have square list bullets

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

Score: 0

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

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 */
}
Score: 0

I tried this today and typed this:
I needed 8 to display color markers in my lists (both 7 bullets and numbers). I came upon this tip and 6 wrote in in my stylesheet whith mutualization 5 of the properties:

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 a different character 4 to display a bullet, watching it here. I needed 3 to adjust the margin accoardingly, maybe 2 the values won't apply with the font you 1 chose (the numbers use your webfont).

Score: 0

Try using this instead:

ul {
  color: red;
}

0

Score: 0

Inline version, works for Outlook Desktop:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle.

0

More Related questions