Bullet point background color attribute? CSS

Question

I'm looking to change the background colour of my bullet points,

ul {
 list-style-type: square;
 list-style-position: outside;
 list-style-image: none;
}

Is there a bullet point background colour attribute? Somthing like this?

list-style-background-color: blue;

EDIT

color: blue

Changes the font colour and the bullet point colour, but I would like to just change the bullet point colour and leave the font alone.

No, because it's not well-defined how exactly the list marker box should be drawn, and therefore there's no way to determine how this background color will appear in your list styles. There may be workarounds but it all depends on your intended result. — BoltClock, Jun 26 '14 at 11:19
Are you speaking about the color of the bullet or about the color of the background of the bullet? — web-tiki, Jun 26 '14 at 11:20
The colour of the bullet and the background of the bullet are separate? I didn't know that. I guess I mean the background-color. — Daft, Jun 26 '14 at 11:21
possible duplicate of [How to set the Color of Bullets in UL/LI Lists via CSS, WITHOUT using images or span tags?](http://stackoverflow.com/questions/5306640/how-to-set-the-color-of-bullets-in-ul-li-lists-via-css-without-using-images-or) — web-tiki, Jun 26 '14 at 11:25
Background of bullet is not the same as color of bullet. In this fiddle, background is gold and color is red : http://jsfiddle.net/webtiki/Jv694/ — web-tiki, Jun 26 '14 at 11:32

score 2 · Answer 1 · answered Jun 26 '14 at 11:18

try like this : LINK

HTML:

<ul>
    <li><span>one</span>
    </li>
    <li><span>one</span>
    </li>
    <li><span>one</span>
    </li>
    <li><span>one</span>
    </li>
</ul>

CSS:

ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
    color:#f00;
}
li {
    color:#f00;
}
li span {
    color:#999;
}

score 2 · Accepted Answer · answered Jun 26 '14 at 11:25

2

Demo

If you don't wish to use <span> or <div>

You can use :before to add custom bullet to your li

li {
    list-style:none;
}

li:before {
    content: "";
    position:relative;
    left: -10px;
    background-color:red;

    display:inline-block;
    width:5px;
    height:5px;
}

answered Jun 26 '14 at 11:25

4dgaurav

11,360
4
32
59

and what if instead of bullet I want to show numbers? – Kheema Pandey Jun 26 '14 at 11:28
1

@KheemaPandey you can use the counter attribute : http://jsfiddle.net/webtiki/Jv694/1/ – web-tiki Jun 26 '14 at 11:35
@KheemaPandey : of-course for that you need to use other answers and now web-tiki's comment :P, my answer for the above question only. What if I want to have a diamond bullet? or some shape bullet? in that case this would be a good option. – 4dgaurav Jun 26 '14 at 11:35
1

@web-tiki : wow! I didn't know that. Thank you so much. I want to +1 you! – 4dgaurav Jun 26 '14 at 11:37
@web-tiki thanks for reminding me about `counter`. Since long time didn't use it.. – Kheema Pandey Jun 26 '14 at 11:44

score 1 · Answer 3 · answered Jun 26 '14 at 11:18

1

Try This http://jsfiddle.net/8dGBr/

<ul>
    <li><div>Hi</div></li>
    <li><div>Hi</div></li>
    <li><div>Hi</div></li>
</ul>

li{
    color:blue;
}
li div{
    color:black;
}

answered Jun 26 '14 at 11:18

Amit

1,841
1
19
36

score 0 · Answer 4 · answered Jun 26 '14 at 11:17

0

just write color:blue; and add to<p> or <span> to inner text with color:black

answered Jun 26 '14 at 11:17

aashi

492
3
11

Bullet point background color attribute? CSS

4 Answers4

Linked