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