Is there an easy way to change the color of a bull

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 style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

One

Two

Three

Answer 2

<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 3

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

Answer 4

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

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!