Zmiana koloru kuli z listy

Mam listę,Zmiana koloru kuli z listy

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

Używam kwadratowy kulę na liście.

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

Kule pojawiają się w kolorze czarnym. Czy to możliwe zmienić kolor kuli? Jeśli tak, jak mogę to zmienić?

Proszę o pomoc, Dzięki

Źródło

2014-09-08 Erma Isabel

[Jak ustawić kolor punktorów na listach UL/LI za pomocą CSS, BEZ używania obrazów lub znaczników span?] (Http://stackoverflow.com/questions/5306640/how-to-set-the-color-of -bullets-in-ul-li-lists-via-css-without-using-images-or) –

dodaj span tag befor e strong i przypisz kolor do zakresu. – Madhesh

http://jsbin.com/juxasa/1/edit – Christina

Example JS Fiddle

Bullets wziąć własność listy color:

.listStyle { 
    color: red; 
}

Uwaga, jeśli chcesz, aby Twoja lista tekst będzie inny kolor, trzeba owinąć go na przykład: p, na przykład:

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

Źródło

2014-09-08 04:12:00

@ C-linkNepal masz rację, i pisałeś to, gdy aktualizowałem swoją odpowiedź :) –

czerwony działa. ".listStyle p" nie działa. Ponieważ treść nie jest w środku p tag –

Nie zgadzam się, dodałem JS Fiddle, aby to udowodnić. –

Polecam używanie background-image zamiast domyślnej listy.

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

Lub, jeśli nie chcesz używać jako obraz tła pocisku, istnieje możliwość, aby to zrobić z elementem pseudo:

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

Źródło

2014-09-08 04:15:34

Pseudoelementy to kiepski wybór na pełne bulwy. Tekst zostanie zawinięty pod punktorem, a nie w wyrównaniu z linią tekstu powyżej z prawdziwymi punktorami – vandre

trzeba użyć obrazu

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

Źródło

2014-09-08 04:16:48 user3074446

Zmiana koloru kuli z listy

Odpowiedz

Powiązane problemy