it-swarm-eu.dev

Gibt es eine einfache Möglichkeit, die Farbe eines Aufzählungszeichens in einer Liste zu ändern?

Alles, was ich möchte, ist, die Farbe einer Kugel in einer Liste in ein Hellgrau ändern zu können. Die Standardeinstellung ist schwarz und ich kann nicht herausfinden, wie ich sie ändern kann.

Ich weiß, ich könnte einfach ein Bild verwenden. Ich würde das lieber nicht tun, wenn ich ihm helfen kann.

81
Dave Haynes

Die Kugel erhält ihre Farbe aus dem Text. Wenn Sie also eine andere Farbe als den Text in Ihrer Liste haben möchten, müssen Sie Markierungen hinzufügen.

Umschließen Sie den Listentext in einem Bereich:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Dann ändern Sie Ihre Stilregeln leicht:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}
156
Prestaul

Ich habe dies ohne Hinzufügen von Markup geschafft, aber vorher li: verwendet. Dies hat offensichtlich alle Einschränkungen von :before (keine alte IE - Unterstützung), scheint aber nach einigen sehr begrenzten Tests mit IE8, Firefox und Chrome zu funktionieren. Es funktioniert in unserer Controller-Umgebung und fragt sich, ob jemand dies überprüfen könnte. Der Aufzählungsstil wird auch durch den Unicode-Inhalt eingeschränkt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

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

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>
44
Marc

Das war 2008 unmöglich, aber es wird bald möglich (hoffentlich)!

Gemäß Der W3C-CSS3-Spezifikation können Sie die vollständige Kontrolle über eine beliebige Anzahl, Glyphe oder andere Symbole haben, die vor einem Listenelement mit dem ::marker-Pseudoelement ..__ generiert wurden. Um dies auf die Lösung der meist gewählten Antwort anzuwenden:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle-Beispiel

Beachten Sie jedoch, dass Stand Juli 2016, diese Lösung nur ein Teil des W3C Working Draft ist und noch nicht in allen gängigen Browsern funktioniert.

Wenn Sie diese Funktion wünschen, führen Sie folgende Schritte aus:

16
Supuhstar
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

das große Problem bei dieser Methode ist das zusätzliche Markup. (das Span-Tag)

5
Jonathan Arkell

Machen Sie einfach einen Punkt in einem Grafikprogramm und verwenden Sie list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}
2
ghr

Hallo, vielleicht ist diese Antwort zu spät, ist aber die richtige, um dies zu erreichen.

Ok Tatsache ist, dass Sie ein internes Tag angeben müssen, damit der LIst-Text wie gewohnt schwarz ist (oder was immer Sie möchten). Es ist aber auch wahr, dass Sie beliebige TAGS und interne Tags mit CSS neu definieren können. Verwenden Sie für die Neudefinition am besten ein SHORTER-Tag

Verwenden Sie diese CSS-Definition:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

Und dieser HTML-Code:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Sie erhalten das gewünschte Ergebnis. Sie können auch jede Scheibe in einer anderen Farbe gestalten:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>
2
Dragnovich

Umschließen Sie den Text innerhalb des Listenelements mit einem Bereich (oder einem anderen Element) und wenden Sie die Aufzählungsfarbe auf das Listenelement und die Textfarbe auf den Bereich an.

0
user4903

Es funktioniert auch gut, wenn wir beispielsweise für jedes Element eine Farbe festlegen: Ich habe jetzt einen Rand hinzugefügt.

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}
0
Mohammed

Nach W3C-Spezifikation

In den Listeneigenschaften können Autoren keinen eindeutigen Stil (Farben, Schriftarten, Ausrichtung usw.) für die Listenmarkierung angeben.

Aber die Idee mit einer Spannweite in der obigen Liste sollte gut funktionieren!

0
Aeon

Sie können Jquery verwenden, wenn Sie viele Seiten haben und nicht selbst das Markup bearbeiten müssen.

hier ist ein einfaches Beispiel:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

Für eine Frage aus dem Jahr 2008 dachte ich, ich könnte eine aktuellere und aktuellere Antwort dazu hinzufügen, wie Sie die Farbe der Aufzählungszeichen in einer Liste ändern können.

Wenn Sie bereit sind, externe Bibliotheken zu verwenden, bietet Font Awesome skalierbare Vektorsymbole , und in Kombination mit Bootstraps Hilfsklassen (z. B. text-success) können Sie einige ziemlich coole und anpassbare Listen erstellen.

Ich habe den Auszug aus der Seite mit den Beispielen für Font Awesome-Liste unten erweitert:

Verwenden Sie fa-ul und fa-li, um Standardaufzählungszeichen in ungeordneten Listen problemlos zu ersetzen.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Font Awesome (meistens) unterstützt IE8 und nur IE7, wenn Sie die ältere Version 3.2.1 verwenden.

0
eggy