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

https://stackoverflow.com/questions/76564

09-06-2019
|

Frage

Alles, was ich möchte in der Lage sein, die Farbe einer Kugel zu einem hellgrauen in einer Liste zu ändern. Der Standardwert ist schwarz, und ich kann nicht herausfinden, wie es zu ändern.

Ich weiß, ich könnte nur ein Bild verwenden; Ich möchte lieber nicht tun, wenn ich ihm helfen kann.

Lösung

Die Kugel erhält seine Farbe aus dem Text. Also, wenn Sie eine andere Farbe Kugel als Text in Ihrer Liste haben möchten, müssen Sie einige Markup hinzufügen.

Wickeln Sie die Liste von Text in einer Spanne:

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

Dann Stil Regeln ändern leicht:

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

Andere Tipps

ich es geschafft, dies ohne Markup hinzufügen, sondern li mit: vor. Dies hat natürlich alle Grenzen :before (keine alte IE-Unterstützung), aber es scheint mit IE8, Firefox und Chrome nach einigen sehr begrenzten Tests zu arbeiten. Es funktioniert in unserer Controller-Umgebung, gefragt, ob jemand dies überprüfen konnte. Die Kugel Stil ist auch begrenzt durch das, was ist in Unicode.

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

Das im Jahr 2008 nicht möglich war, aber es ist immer möglich, bald (hoffentlich)!

Nach der W3C CSS3-Spezifikation , Sie können vor einem Listenelement mit dem ::marker Pseudoelement erzeugt die volle Kontrolle über eine beliebige Anzahl, Glyphe, oder ein anderes Symbol haben. Um dies auf die meisten Stimmen Antwort der Lösung:

<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 ab Juli 2016 , diese Lösung ist nur ein Teil des Entwurfs der W3C-Arbeits und funktioniert nicht in allen gängigen Browsern, noch nicht.

Wenn Sie diese Funktion wünschen, tun dies:

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

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

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

Ok die Tatsache ist, dass Sie eine interne Variable angeben müssen, um die Liste Text auf dem üblichen schwarz zu machen (oder was auch immer Sie wollen, um es zu bekommen). Aber ist auch wahr, dass Sie TAGS und interne Variablen mit CSS neu definieren. So ist die beste Art und Weise dieser Verwendung einen kürzeren Tag für die Neudefinition zu tun

usign diese CSS-Definition:

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

Und der HTML-Code:

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

Sie erhalten gewünschtes Ergebnis. Sie können auch jede Scheibe diferent Farbe machen:

<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 doch einfach eine Kugel in einem Grafikprogramm und Verwendung list-style-image:

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

Wickeln Sie den Text innerhalb des Listenelement mit einer Spanne (oder einem anderen Element) und ziehen Sie die Kugel Farbe auf den Listeneintrag und die Textfarbe auf die Spanne.

Wie pro W3C-Spezifikation ,

Die Liste Eigenschaften ... do Autoren nicht zulassen, dass eindeutige Art spezifizieren (Farben, Schriftarten, Ausrichtung, etc.) für die Listen Marker ...

Aber die Idee, mit einer Spannweite innerhalb der Liste soll über gut funktionieren!

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

Sie können JQuery verwenden, wenn Sie viele Seiten haben und müssen nicht das Markup, um sich selbst gehen und zu bearbeiten.

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

Für eine 2008 Frage, dachte ich, ich könnte ein neueres hinzufügen und up-to-date Antwort, wie Sie über das Ändern der Farbe der Kugeln in einer Liste gehen könnte.

Wenn Sie bereit sind, externe Bibliotheken zu verwenden, Font Ehrfürchtig gibt Ihnen skalierbare Vektor-Icons , und wenn sie mit Bootstrap Helfer Klassen (zB. text-success) kombiniert, können Sie machen einige ziemlich cool und anpassbare Listen.

Ich habe auf dem Extrakt erweitert von der Schriftart Ehrfürchtig Liste Beispiele unten:

Mit fa-ul und fa-li leicht zu Standard-Bullets in ungeordneten Listen 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 Ehrfürchtig (meist) unterstützt IE8 , und nur unterstützt IE7, wenn Sie die ältere Version 3.2.1 .

Es funktioniert auch, wenn wir Farbe für jedes Element zum Beispiel festgelegt: Ich habe einige Margin jetzt nach links.

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

Sie können CSS verwenden, um dies zu erreichen. Durch die Angabe der Liste in der Farbe und Stil Ihrer Wahl können Sie dann angeben, auch den Text in einer anderen Farbe.

Beachten Sie das Beispiel unter http://www.echoecho.com/csslists.htm .

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

Ein

Zwei

Drei

Just CSS verwenden:

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

Sie wollen einen „list-style“ über CSS setzen, und gibt ihm eine Farbe: Wert. Beispiel:

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow