Ändern Sie die Farbe der Aufzählungszeichen einer HTML-Liste, ohne span zu verwenden

Ich habe mich gefragt, ob es eine Möglichkeit gibt, die Farbe der Kugeln in einer Liste zu ändern.

Ich habe eine Liste wie diese:

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

Es ist mir nicht möglich, irgendetwas in die Li einzufügen, wie zum Beispiel eine 'span' oder ein 'p'. Kann ich also die Farbe der Aufzählungszeichen ändern, aber nicht den Text auf intelligente Weise?

Wenn Sie ein Bild verwenden können, können Sie dies tun. Und ohne ein Bild können Sie nicht nur die Farbe der Aufzählungszeichen und nicht den Text ändern.

Verwenden eines Bildes

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

Sehen

Listenstil-Bild

Ohne ein Bild zu verwenden

Dann müssen Sie das HTML-Markup bearbeiten und einen Bereich in die Liste aufnehmen und das Li und den Bereich mit verschiedenen Farben färben.

Ich habe dies ohne Hinzufügen von Markup geschafft, sondern mit li:before. Dies hat offensichtlich alle Einschränkungen von :before(keine alte IE-Unterstützung), aber es scheint nach einigen sehr begrenzten Tests mit IE8, Firefox und Chrome zu funktionieren. Der Aufzählungsstil wird auch durch die Unicode-Funktionen eingeschränkt.

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>

Wir können list-style-imagemit svgs kombinieren , was wir in CSS inline können ! Diese Methode bietet eine unglaubliche Kontrolle über die "Kugeln", die alles werden können.

Um einen roten Kreis zu erhalten, verwenden Sie einfach das folgende 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>');
}

Dies ist jedoch nur der Anfang. Dies ermöglicht es uns, mit diesen Kugeln alles zu tun, was wir wollen. Kreise oder Rechtecke sind einfach, aber alles, was Sie zeichnen können, svgkann dort bleiben! Schauen Sie sich das Bullseye-Beispiel unten an:

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>

Attribute für Breite / Höhe

Einige Browser erfordern widthund heightAttribute müssen auf dem festgelegt werden<svg> , oder sie zeigen nichts an. Zum Zeitpunkt des Schreibens weisen neuere Versionen von Firefox dieses Problem auf. Ich habe beide Attribute in den Beispielen festgelegt.

Kodierungen

Ein kürzlich veröffentlichter Kommentar erinnerte mich an Codierungen für die Daten-Uri. Dies war in letzter Zeit ein Problem für mich und ich kann ein paar Informationen teilen, die ich recherchiert habe.

Die Daten-Uri-Spezifikation , die auf die URI-Spezifikation verweist , besagt, dass die SVG gemäß der URI-Spezifikation codiert werden sollte . Das bedeutet, dass alle Arten von Zeichen codiert werden sollten, z . B. <wird %3C.

Einige Quellen schlagen eine Base64-Codierung vor, die Codierungsprobleme beheben sollte, jedoch die Größe des SVG unnötig erhöht, während dies bei der URI-Codierung nicht der Fall ist. Ich empfehle die URI-Codierung.

Mehr Info:

Browser-Unterstützung: > ie8

CSS-Tricks auf SVGs

mdn auf svgs

Aufbauend auf der Lösung von @ Marc - da das Aufzählungszeichen mit verschiedenen Schriftarten und Browsern unterschiedlich gerendert wird, habe ich die folgende CSS3-Technik mit Rahmenradius verwendet, um ein Aufzählungszeichen zu erstellen, über das ich mehr Kontrolle habe:

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;
}

Ich weiß, dass dies eine wirklich, wirklich, alte Frage ist, aber ich habe damit herumgespielt und mir einen Weg ausgedacht, den ich noch nicht gesehen habe. Geben Sie der Liste eine Farbe und überschreiben Sie die Textfarbe mit der ::first-lineAuswahl. Ich bin kein Experte, also stimmt vielleicht etwas mit diesem Ansatz nicht, aber es scheint zu funktionieren.

li {
  color: blue;
}

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

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

Aufbau von @ Marc- und @ Jessica-Lösungen - Dies ist die Lösung, die ich verwende:

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

Ich verwende emfür Schriftgrößen. Wenn Sie also Ihren topWert so einstellen .5em, wird er immer an der Mitte Ihrer ersten Textzeile platziert. Ich habe verwendet, left:-20pxweil dies die Standardposition von Aufzählungszeichen in Browsern ist: Eltern padding/2

Marc's Antwort hat mir auch sehr gut gefallen - ich brauchte einen Satz verschiedenfarbiger ULs und natürlich wäre es einfacher, nur eine Klasse zu verwenden. Folgendes habe ich zum Beispiel für Orange verwendet:

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;
}

Außerdem stellte ich fest, dass der Hex-Code, den ich für "content:" verwendete, anders war als der von Marc (dieser Hex-Kreis schien etwas zu hoch zu sein). Der, den ich benutzt habe, scheint perfekt in der Mitte zu sitzen. Ich habe hier auch einige andere Formen (Quadrate, Dreiecke, Kreise usw.) gefunden

Für mich ist die beste Option die Verwendung von CSS-Pseudoelementen. Für das discAufzählungszeichen sieht es also so aus:

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>

Anmerkungen:

• widthund heightsollten gleiche Werte haben, um Zeiger gerundet zu halten
• Sie können border-radiusauf Null setzen , wenn Sie squareListenaufzählungszeichen haben möchten

Für weitere Aufzählungszeichenstile können Sie andere CSS-Formen verwenden. Https://css-tricks.com/examples/ShapesOfCSS/ (Wählen Sie diese Option , für die keine Pseudoelemente erforderlich sind, z. B. Dreiecke.)

::Marker

Sie können das ::markerCSS-Pseudoelement verwenden, um das Markierungsfeld eines Listenelements (dh Aufzählungszeichen oder Zahlen) auszuwählen.

ul li::marker {
  color: red;
}

Hinweis: Zum Zeitpunkt der Veröffentlichung dieser Antwort gilt dies als experimentelle Technologie und wurde (bisher) nur in Firefox und Safari implementiert.

Aufbauend auf der Antwort von @ ddilsaver. Ich wollte in der Lage sein, ein Sprite für die Kugel zu verwenden. Dies scheint zu funktionieren:

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

Ich habe dies heute versucht und Folgendes eingegeben:
Ich musste Farbmarkierungen in meinen Listen anzeigen (sowohl Aufzählungszeichen als auch Zahlen). Ich bin auf diesen Tipp gestoßen und habe in mein Stylesheet mit Gegenseitigkeit der Eigenschaften geschrieben:

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;
}

Ich habe einen anderen Charakter ausgewählt, um eine Kugel anzuzeigen, und sie hier angesehen . Ich musste den Rand entsprechend anpassen, möglicherweise gelten die Werte nicht für die von Ihnen gewählte Schriftart (die Zahlen verwenden Ihre Webschrift).

Versuchen Sie stattdessen Folgendes:

ul {
  color: red;
}

Inline-Version, funktioniert für Outlook Desktop:

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