Css – Change the bullet color of list

css

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

Best Answer

Example JS Fiddle

Bullets take the color property of the list:

.listStyle {
    color: red;
}

Note if you want your list text to be a different colour, you have to wrap it in say, a p, for example:

.listStyle p {
    color: black;
}

Example HTML:

<ul class="listStyle">
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
</ul>
Related Question