Changing the color of the bullet in the <li> tag

[nixpix]

Hi there

I've searched all the forums on a couple of websites trying to solve my problem.

I am constructing a site in which I want to change the color of ONLY the actual bullet in a list item.

I have defined the bullet to be square using CSS, but need to know if I can change only the color of the bullet without changing the color of the text inside the list item.

Is this possible?

I am aware that I can add in a normal bullet and change the color thereof, but I really want to find a way to do all of this using my list and CSS.

Any help would be greatly appreciated :cheesy:

[tgreer]

Not possible; not part of the CSS specification.

[GliderPilot]

There are two ways to accomplish this each of which has it's good and bad points. I'll let you decided which method to use:

You can create a list marker graphic (e.g., a GIF file) that has your desired color. Then use a style-sheet to specify a list-style-image.

-OR-

It is also possible to make the content of each LI element an element of its own, normally using SPAN or DIV, as in:

<li><span>list item, text level content</span></li>

Then set the color of LI to something, and the color of the inner element to something else. This would result in a list bullet that is of different color than the list item.

On the technical side, using an image as a bullet (via list-style-image in CSS) sounds better, but it is diffacult to adjust the positioning of the bullet with that method.

[nixpix]

Thanks, I've gone with inserting a bullet and changing the colour of the bullet, not the list item.