Is there an easy way to change the color of a bullet in a list?

Question

All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can't figure out how to change it.

I know I could just use an image; I'd rather not do that if I can help it.

Answer 1

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

the big problem with this method is the extra markup. (the span tag)

Answer 2

Wrap the text within the list item with a span (or some other element) and apply the bullet color to the list item and the text color to the span.

Answer 3

You'll want to set a "list-style" via CSS, and give it a color: value. Example: ul.colored {list-style: color: green;}

Answer 4

Just use CSS:

<li style='color:#e0e0e0'>something</li>

Answer 5

The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you'll have to add some markup.

Wrap the list text in a span:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Then modify your style rules slightly:

li {
  color: red; /* bullet color */
}
li span {
  color: black /* text color */
}

Answer 6

this

  li:before {
   color: pink;
  }

was suggested here

Answer 7

As per W3C spec,

The list properties ... do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker ...

But the idea with a span inside the list above should work fine!

Answer 8

<ul style="color: red;">
<li>One</li>
<li>Two></li>
<li>Three</li>
</ul>

One

Two>

Three

Answer 9

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

Answer 10

You could use CSS to attain this. By specifying the list in the color and style of your choice, you can then also specify the text as a different color.

Follow the example at http://www.echoecho.com/csslists.htm.

Answer 11

Hello maybe this answer is late but is the correct one to achieve this.

Ok the fact is that you must specify an internal tag to make the LIst text be on the usual black (or what ever you want to get it). But is also true that you can REDEFINE any TAGS and internal tags with CSS. So the best way to do this use a SHORTER tag for the redefinition

Usign this CSS definition:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

And this html code:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

You get required result. Also you can make each disc diferent color:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>

Answer 12

There is a really good article on this at JohnNemec.com - maybe that might clear up some confusion.