how to set ul/li bullet point color?

Question

Possible Duplicate:
Change bullets color in a list without span

Normally, the bullet point in ul/li is a black solid circle. I want to change the style of it, like I want to set the color of the bullet point to be green, I also want to change the bullet point to be a square. Anyone knows how to do that?

Answer 1

Apply the color to the li and set the span (or other child element) color to whatever color the text should be.

ul
{
    list-style-type: square;
}

ul > li
{
    color: green;
}

ul > li > span
{
    color: black;
}

JSFiddle

Answer 2

A couple ways this can be done:

This will make it a square

ul
{
  list-style-type: square;
}

This will make it green

li
{
  color: #0F0;
}

This will prevent the text from being green

li p
{
  color: #000;
}

However that will require that all text within lists be in paragraphs so that the color is not overridden.

A better way is to make an image of a green square and use:

ul
{
  list-style: url(green-square.png);
}

Answer 3

http://www.w3schools.com/cssref/pr_list-style-type.asp

You need to use list-style-type: to change bullet type/style and the above link has all of the options listed. As others have stated the color is changed using the color property on the ul itself

To create 'black filled' bullets, use 'disc' instead of 'circle',i.e.:

list-style-type:disc

Answer 4

I believe this is controlled by the css color property applied to the element.