Изменить цвет пули списка

У меня есть список,

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

Я использую квадратную пулю для списка.

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

Пули отображаются черным цветом. Возможно ли изменить цвет пули? Если да, как я могу его изменить?

Пожалуйста, помогите, Благодаря

Ответ 1

Пример JS Fiddle

Пули принимают свойство color списка:

.listStyle {
    color: red;
}

Обратите внимание, что если вы хотите, чтобы текст вашего списка был другого цвета, вы должны его обернуть, скажем, p, например:

.listStyle p {
    color: black;
}

Пример HTML:

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

Ответ 2

Я бы порекомендовал вам использовать фоновое изображение вместо списка по умолчанию.

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

Или, если вы не хотите использовать фоновое изображение в качестве пули, есть возможность сделать это с псевдоэлементом:

.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 */
}

Ответ 3

Вы должны использовать изображение

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