[css] Change the bullet color of list

I have a list,

    <ul class="listStyle">
        <li>
            <strong>View :</strong> blah blah.
        </li>
        <li>
            <strong>Edit :</strong> blah blah blah.
        </li>
    </ul>

I am using square bullet for list.

    .listStyle{
        list-style-type: square;
    }

Bullets appears in black color. Is it possible change the color of the bullet? If yes, how can i change it?

Please help, Thanks

This question is related to css

The answer is


I would recommend you to use background-image instead of default list.

.listStyle {
    list-style: none;
    background: url(image_path.jpg) no-repeat left center;
    padding-left: 30px;
    width: 20px;
    height: 20px;
}

Or, if you don't want to use background-image as bullet, there is an option to do it with pseudo element:

.liststyle{
    list-style: none;
    margin: 0;
    padding: 0;
}
.liststyle:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
    font-size: 20px;/* or whatever the bullet size you prefer */
}

You have to use image

.listStyle {
    list-style: none;
    background: url(bullet.jpg) no-repeat left center;
    padding-left: 40px;
}