简体   繁体   中英

Bullet point background color attribute? CSS

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.

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

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM