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

Question

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

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

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

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

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

Пожалуйста, помогите, Спасибо

Answer 1

Example JS Fiddle

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

.listStyle { 
    color: red; 
} 

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

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

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

Answer 3

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

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