Die Farbe eines Aufzählungszeichens in einer HTML-Liste ändern?

86

Ich möchte nur in der Lage sein, die Farbe einer Kugel in einer Liste in hellgrau zu ändern. Der Standardwert ist Schwarz, und ich kann nicht herausfinden, wie ich ihn ändern soll.

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

html css html-lists

— Dave Haynes
quelle

Ich würde einfach selbst mit einem Bild arbeiten und das zusätzliche Markup vermeiden. Es ist wahrscheinlich die effizientere Lösung

— Sam Murray-Sutton

8

Wer kümmert sich um "extra" Markup wie dieses ... im Ernst, Sie verlieren nichts, wenn Sie es tun.

159

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

Wickeln Sie den Listentext in einen Bereich ein:

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

Ändern Sie dann Ihre Stilregeln leicht:

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

— Prestaul
quelle

Genau das, was ich brauchte! Ich habe eine Liste von Links und auf die Links wird ohnehin schon ein anderer Farbstil angewendet.

— Dave Haynes

Dies ist nicht der schönste Weg, dies zu tun. Dies funktioniert beispielsweise nicht, wenn Sie mit einem WYSIWYG-Editor einen Cms haben. Die <span> -Elemente werden nicht gerendert. Was Sie vielleicht wollen, ist, mit: vor und: nach zu arbeiten und die Bullen selbst wegzulassen. Dies ist eigentlich eine sehr schlechte Praxis.

— Automagisch

2

@KoenHoutman, zu der Zeit, als dies geschrieben wurde (2008), war es die einzige Technik mit angemessener Unterstützung. Selbst heute ist es keine schlechte Praxis und immer noch die Technik mit der breitesten Browserunterstützung, obwohl ich der Meinung bin, dass ich mich heute (in den meisten Fällen) für die Verwendung :beforewie in Marc's Antwort unten entscheiden würde.

— Prestaul

Da Sie nur die Darstellung des Textes ändern, ist ein bTag besser geeignet.

— Supuhstar

45

Ich habe das geschafft, ohne Markup hinzuzufügen, aber stattdessen 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. Es funktioniert in unserer Controller-Umgebung und fragt sich, ob jemand dies überprüfen könnte. Der Aufzählungsstil wird auch durch die Unicode-Funktionen 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>

— Marc
quelle

Dies ist der schwierigere Weg mit CSS3 im Vergleich zu der akzeptierten Antwort

— Minni

17

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

Gemäß der W3C CSS3-Spezifikation können Sie die vollständige Kontrolle über jede Zahl, jedes Symbol oder jedes andere Symbol haben, das vor einem Listenelement mit dem ::markerPseudoelement generiert wird . So wenden Sie dies auf die Lösung der am häufigsten gewählten Antwort an:

<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 diese Lösung ab Juli 2016 nur ein Teil des W3C-Arbeitsentwurfs ist und noch in keinem größeren Browser funktioniert.

Wenn Sie diese Funktion wünschen, gehen Sie folgendermaßen vor:

— Supuhstar
quelle

6

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

— Jonathan Arkell
quelle

Da Sie nur die Darstellung des Textes ändern, ist ein bTag besser geeignet.

— Supuhstar

1

Als dies geschrieben wurde, war das b-Tag mitten in der Verwerfung zugunsten eines starken Tags. Aber ja, Sie haben Recht, jetzt wäre ab tag besser geeignet.

— Jonathan Arkell

2

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

Ok, Tatsache ist, dass Sie ein internes Tag angeben müssen, damit der erste Text das übliche Schwarz aufweist (oder was auch immer Sie möchten). Es ist aber auch wahr, dass Sie alle TAGS und internen Tags mit CSS neu definieren können. Verwenden Sie dazu am besten ein SHORTER-Tag für die Neudefinition

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

Sie sollten <span> verwenden. Außerdem ist <b> veraltet.

— the_drow

2

Zähler auf @the_drow, <b> ist nicht veraltet. stackoverflow.com/questions/1348683/…

— Strixy

2

Machen Sie einfach eine Kugel in einem Grafikprogramm und verwenden Sie list-style-image:

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

— ghr
quelle

1

Das OP wollte ausdrücklich kein Bild verwenden, aber ich bin darauf gestoßen und habe nach einem allgemeinen Weg gesucht, um die Kugel zu ersetzen. Ich denke, diese Antwort ist der Vollständigkeit halber gut.

— Zane

Hier ist einer mit SVG-Kreis, den man leicht

list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");

— einfärben

0

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

0

Gemäß W3C-Spezifikation ,

Die Listeneigenschaften ... erlauben es Autoren nicht, einen bestimmten Stil (Farben, Schriftarten, Ausrichtung usw.) für die Listenmarkierung anzugeben ...

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

— Äon
quelle

0

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

0

Sie können Jquery verwenden, wenn Sie viele Seiten haben und das Markup nicht selbst 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
});

— alaasdk
quelle

0

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

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

Ich habe den Auszug aus der folgenden Seite mit Beispielen für die Liste "Font Awesome" erweitert :

Verwenden Sie fa-ulund fa-li, um Standardaufzählungszeichen in ungeordneten Listen einfach 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>

Erweitern Sie das Snippet

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

— eggy
quelle

0

Es funktioniert auch, wenn wir für jedes Element Farbe festlegen, zum Beispiel: Ich habe jetzt links 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;
}

— Mohammed
quelle

-1

Sie können CSS verwenden, um dies zu erreichen. Indem Sie die Liste in der Farbe und dem Stil Ihrer Wahl angeben, können Sie den Text auch als andere Farbe angeben.

Folgen Sie dem Beispiel unter http://www.echoecho.com/csslists.htm .

-1

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Einer

Zwei

Drei

— NerdFury
quelle

-2

Verwenden Sie einfach CSS:

<li style='color:#e0e0e0'>something</li>

— Diodeus - James MacFarlane
quelle

Ja, das habe ich auch gedacht ... aber das Stylen der Farbe ändert sowohl die Farbe des Textes als auch die Aufzählungszeichen.

— Aeon

-5

Sie möchten einen "Listenstil" über CSS festlegen und ihm einen color: value geben. Beispiel:

ul.colored {list-style: color: green;}

— Ahockley
quelle