Possible to Change List Bullet Color?

I've got an unordered list with a list-style-type of 'square.' The
color of this (and the text in the list) is black.

Is it possible, via the CSS, to specify the color of this square (i.e.
make the bullet red) without changing the color of the text in the list
also?

For example, setting 'color: red' makes the square and text red, but I
want the square to be red and the text to remain black.

I was hoping for a quick way of achieving this and would rather not
specify a small gif image as the bullet-image.

Thanks for any help.

spm wrote:

I've got an unordered list with a list-style-type of 'square.' The color
of this (and the text in the list) is black.

Is it possible, via the CSS, to specify the color of this square (i.e.
make the bullet red) without changing the color of the text in the list
also?

Under CSS 2.1, no.[*]

The current WD of the CSS 3 Lists module does specify the ::marker
pseudo-element which would do exactly what you want; FF has been tested
to not support ::marker and I doubt that either Safari or Opera has it.
IE, of course, does not support it.
[*] Not directly, at least. Wrapping a <span class="foo"> within each
<li> element allows you to do this, but it is relatively hack-ish.
--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

You could make the bullet an image and then use something like the following
to invoke it ...

ul
{
list-style-image : url( "http://www.xxxxxxxx.com/bullet.gif" );
}

.... Thom
__________________________________________________ _
Thom Little - www.tlanet.net - Thom Little Associates, Ltd.

On 2007-09-23 23:57:26 +0100, Joshua Cranmer <Pidgeot18 (AT) verizon (DOT) net> said:

spm wrote:
I've got an unordered list with a list-style-type of 'square.' The
color of this (and the text in the list) is black.

Is it possible, via the CSS, to specify the color of this square (i.e.
make the bullet red) without changing the color of the text in the list
also?

Under CSS 2.1, no.[*]

The current WD of the CSS 3 Lists module does specify the ::marker
pseudo-element which would do exactly what you want; FF has been tested
to not support ::marker and I doubt that either Safari or Opera has it.
IE, of course, does not support it.
[*] Not directly, at least. Wrapping a <span class="foo"> within each
li> element allows you to do this, but it is relatively hack-ish.

Thanks for the explanation Joshua. I'll look forward to CSS 3 in that
case, though I guess it'll be several years yet before the
specification is even agreed, never mind supported by the major
browsers of the day.

Thanks.

On 2007-09-24 12:55:17 +0100, "Thom Little" <thom (AT) tlanet (DOT) net> said:

You could make the bullet an image and then use something like the following
to invoke it ...

ul
{
list-style-image : url( "http://www.xxxxxxxx.com/bullet.gif" );
}

... Thom
__________________________________________________ _
Thom Little - www.tlanet.net - Thom Little Associates, Ltd.

Yes, I was hoping to do it with CSS, but other than use the hack that
Joshua posted, I guess the above is the most efficient and 'hack free'
way I can do this.

Thanks.

Scripsit Johannes Koch:

Note, that browsers won't resize the image specified with
list-style-image, when the user changes the font size.

Unfortunately, we have the same problem with the default list bullets, and
generally with list markers. So I don't think this is a strong argument
against using images a list bullets - though, theoretically, we can argue
that browsers _should_ scale the default bullets (and markers settable with
list-style-type) according to font size.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela schrieb:

Scripsit Johannes Koch:

Note, that browsers won't resize the image specified with
list-style-image, when the user changes the font size.

Unfortunately, we have the same problem with the default list bullets,

Well, at least my Firefox 1.5.0.12, IE 7.0.5730.11, Opera 9.22 (all Win)
resize the default list bullets when resizing the text.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Scripsit Johannes Koch:

Jukka K. Korpela schrieb:
Scripsit Johannes Koch:

Note, that browsers won't resize the image specified with
list-style-image, when the user changes the font size.

Unfortunately, we have the same problem with the default list
bullets,

Well, at least my Firefox 1.5.0.12, IE 7.0.5730.11, Opera 9.22 (all
Win) resize the default list bullets when resizing the text.

Right, sorry, I was thinking about other matters... namely CSS. When I use
the browser's font size control, then the bullet size indeed changes, but if
I set, say,

<ul style="font-size:300%">

(just to make a point [no pun intended]), the default bullets keep their
size, resulting in a grotesque mismatch between their size and text size.

The only way to make bullets get the same size as text is to make them part
of the textual content somehow. Using :before pseudo-elements and generated
content, this would be possible in pure CSS, but IE still doesn't support
them.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

In article <Gl7Ki.228573$ad4.74032 (AT) reader1 (DOT) news.saunalahti.fi>,
"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

The only way to make bullets get the same size as text is to make them part
of the textual content somehow. Using :before pseudo-elements and generated
content, this would be possible in pure CSS, but IE still doesn't support
them.

Or perhaps using an image inside the list item and dimensioning
it in ems.

--
dorayme

spm wrote:

Thanks for the explanation Joshua. I'll look forward to CSS 3 in that
case, though I guess it'll be several years yet before the specification
is even agreed, never mind supported by the major browsers of the day.

Thanks.

From what I have gathered from observing some of the specs, a sizable
portion of CSS 3 is sufficiently stable enough to be worth reading and
some of it even enjoys (sometimes) widespread support. The best example
is Selectors, where everything but the pseudo-elements, and some of the
pseudo-classes are supported in several browsers (IE and Safari don't
appear to take namespacing into account--that is probably a special
issue not wholly relevant here).

I would be willing to bet that much of the actual RECs that come out of
CSS 3 will have at least as much as the current WD states, the only
exception being some of the thornier i18n issues. Support, though, is
still mostly hard-to-find and in experimental regimes.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth