Zmień kolor punktorów na liście HTML bez używania zakresu

Zastanawiałem się, czy istnieje sposób na zmianę koloru kul na liście.

Mam taką listę:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

Nie mogę wstawić niczego do li, na przykład „span” lub „p”. Czy mogę więc zmienić kolor punktorów, ale nie tekst w sprytny sposób?

Jeśli możesz użyć obrazu, możesz to zrobić. A bez obrazu nie będziesz w stanie zmienić tylko koloru punktorów, a nie tekstu.

Korzystanie z obrazu

li { list-style-image: url(images/yourimage.jpg); }

Widzieć

obraz w stylu listy

Bez użycia obrazu

Następnie musisz edytować znaczniki HTML i dołączyć rozpiętość do listy i pokolorować li i span różnymi kolorami.

Udało mi się to bez dodawania znaczników, ale zamiast tego użyłem li:before. To oczywiście ma wszystkie ograniczenia :before(brak starej obsługi IE), ale wydaje się, że działa z IE8, Firefox i Chrome po kilku bardzo ograniczonych testach. Styl punktora jest również ograniczony przez zawartość Unicode.

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Możemy łączyć list-style-imagez svgs, które możemy wstawić w css ! Ta metoda zapewnia niesamowitą kontrolę nad „kulami”, które mogą stać się wszystkim.

Aby uzyskać czerwone kółko, użyj następującego css:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

Ale to dopiero początek. To pozwala nam robić dowolne szalone rzeczy z tymi kulami. okręgi lub prostokąty są łatwe, ale wszystko, co możesz narysować svg, możesz tam umieścić! Sprawdź poniższy przykład w dziesiątkę:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Atrybuty szerokości / wysokości

Niektóre przeglądarki wymagają ustawienia atrybutów widthi lub nic nie wyświetlają. W chwili pisania tego artykułu w najnowszych wersjach przeglądarki Firefox występuje ten problem. W przykładach ustawiłem oba atrybuty.height<svg>

Kodowania

Niedawny komentarz przypomniał mi o kodowaniu danych uri. To był dla mnie ostatnio problem i mogę podzielić się kilkoma informacjami, które zbadałem.

Specyfikacja data-uri , która odwołuje się do specyfikacji URI , mówi, że svg powinien być zakodowany zgodnie ze specyfikacją URI . Oznacza to, że należy zakodować wszystkie rodzaje znaków, np . <Staje się %3C.

Niektóre źródła sugerują kodowanie base64, które powinno rozwiązać problemy z kodowaniem, jednak niepotrzebnie zwiększy rozmiar SVG, podczas gdy kodowanie URI nie. Polecam kodowanie URI.

Więcej informacji:

obsługa przeglądarki: > ie8

sztuczki css na svgs

mdn na svgs

Opierając się na rozwiązaniu @ Marca - ponieważ znak punktora jest renderowany inaczej w różnych czcionkach i przeglądarkach, użyłem następującej techniki css3 z border-radius, aby utworzyć punktor, nad którym mam większą kontrolę:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Wiem, że to naprawdę stare pytanie, ale bawiłem się nim i wymyśliłem sposób, którego nie widziałem opublikowanego. Nadaj liście kolor, a następnie nadpisz kolor tekstu za pomocą ::first-lineselektora. Nie jestem ekspertem, więc może jest coś nie tak z tym podejściem, którego mi brakuje, ale wydaje się, że działa.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Opierając się zarówno na rozwiązaniach @Marc, jak i @jessica - oto rozwiązanie, którego używam:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

Używam emdo rozmiarów czcionek, więc jeśli ustawisz topwartość na .5em, zawsze będzie ona umieszczona w środkowym punkcie pierwszego wiersza tekstu. Użyłem, left:-20pxponieważ jest to domyślna pozycja punktorów w przeglądarkach: rodzic padding/2

Bardzo podobała mi się również odpowiedź Marca - potrzebowałem zestawu różnych kolorów UL i oczywiście byłoby łatwiej po prostu użyć klasy. Oto, czego użyłem do pomarańczy, na przykład:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Poza tym odkryłem, że kod szesnastkowy, którego użyłem dla „content:” był inny niż kod Marca (ten szesnastkowy okrąg wydawał się być nieco za wysoko). Ten, którego użyłem, wydaje się leżeć idealnie pośrodku. Znalazłem też kilka innych kształtów (kwadraty, trójkąty, koła, itp) prawo tutaj

Dla mnie najlepszą opcją jest użycie pseudoelementów CSS, więc przy discstylowaniu punktorów wyglądałoby to tak:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Uwagi:

• widthi heightpowinny mieć równe wartości, aby wskaźniki były zaokrąglone
• możesz ustawić border-radiusna zero, jeśli chcesz mieć squarepunktory listy

Aby uzyskać więcej stylów punktorów, możesz użyć innych kształtów css https://css-tricks.com/examples/ShapesOfCSS/ (wybierz tę, która nie wymaga pseudoelementów do działania, na przykład trójkąty)

::znacznik

Możesz użyć ::markerpseudoelementu CSS, aby zaznaczyć pole znacznika elementu listy (np. Punktory lub cyfry).

ul li::marker {
  color: red;
}

Uwaga: w momencie publikowania tej odpowiedzi jest to technologia eksperymentalna i została wdrożona tylko w przeglądarkach Firefox i Safari (do tej pory).

Opierając się na odpowiedzi @ ddilsaver. Chciałem móc użyć sprite'a do pocisku. To wydaje się działać:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

Wypróbowałem to dzisiaj i wpisałem to:
musiałem wyświetlić kolorowe znaczniki na moich listach (zarówno punktory, jak i cyfry). Natknąłem się na tę wskazówkę i napisałem w moim arkuszu stylów z mutualizacją właściwości:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

Wybrałem inną postać do wyświetlania kuli, obserwując ją tutaj . Musiałem odpowiednio dostosować margines, być może wartości nie będą miały zastosowania z wybraną czcionką (liczby używają czcionki internetowej).

Spróbuj użyć tego zamiast tego:

ul {
  color: red;
}

Wersja wbudowana, działa z klasycznym programem Outlook:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .