it-swarm.com.de

So setzen Sie Bullet-Farben in UL / LI-HTML-Listen über CSS, ohne Bilder oder Span-Tags zu verwenden

Stellen Sie sich eine einfache unsortierte Liste mit einigen <li> Elementen vor. Jetzt habe ich die Kugeln so definiert, dass sie über list-style:square; quadratisch sind. Wenn ich jedoch die Farbe der <li> Elemente mit color: #F00; einstelle, dann alles wird rot!

Dabei möchte ich nur die Farbe der quadratischen Kugeln einstellen. Gibt es ein eleganter Weg um die Farbe der Aufzählungszeichen in CSS zu definieren ...

... ohne Verwendung von Sprite-Bildern oder Span-Tags!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}
495
Sam

Der gebräuchlichste Weg, dies zu tun, ist folgender:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

Funktioniert in allen Browsern, einschließlich IE ab Version 8.

1006
Lea Verou

haben Sie vor einiger Zeit diese Website gefunden und diese Alternative ausprobiert?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

klingt schwer, aber Sie können Ihr eigenes PNG-Bild/Muster erstellen hier, dann Ihren Code kopieren/einfügen und Ihre Aufzählungszeichen anpassen =) stills elegant?

BEARBEITEN:

nach der Idee von @ lea-verou bei der anderen Antwort und der Anwendung dieser Philosophie der Verbesserung von externen Quellen bin ich zu dieser anderen Lösung gekommen:

  1. betten Sie das Stylesheet der Webfont Icons Library in Ihren Kopf ein, in diesem Fall Font Awesome:

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

  1. nimm einen Code von FontAwesome Spickzettel (oder einem anderen Webfont-Symbol).
i.e.:
fa-angle-right [&#xf105;]

und benutze den letzten Teil von f ... gefolgt von einer Zahl wie dieser, auch mit dem font-family:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

und das ist es! jetzt hast du auch benutzerdefinierte bullet tips =)

Geige

88

Die aktuelle Spezifikation des Moduls CSS 3 Lists gibt das ::marker -Pseudoelement an, das genau das tun würde, was Sie wollen. FF wurde getestet, um ::marker nicht zu unterstützen, und ich bezweifle, dass es entweder Safari oder Opera gibt. IE unterstützt das natürlich nicht.

Die einzige Möglichkeit, dies zu tun, besteht derzeit darin, ein Bild mit list-style-image zu verwenden.

Ich nehme an, Sie könnten den Inhalt eines li mit einem span umwickeln und dann die Farbe eines jeden festlegen, aber das kommt mir etwas hackisch vor.

45
Alex

Ich löse dieses Problem einfach so, das in allen Browsern funktionieren sollte:

HTML:

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

CSS:

ul li{
    color: red
}

ul li span{
    color: blue;
}
45
mdthh

Eine Möglichkeit besteht darin, li:before mit content: "" zu verwenden und als inline-block -Element zu formatieren.

Hier ist ein funktionierendes Code-Snippet:

ul {
  list-style-type: none; /* no default bullets */
}

ul li { 
  font-family: Arial;
  font-size: 18px;
}

ul li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}
<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>
42
Rahul Desai

Noch eine andere Lösung besteht darin, ein :before -Pseudoelement mit einem border-radius: 50% zu verwenden. Dies funktioniert in allen Browsern, einschließlich IE 8 und höher.

Die Verwendung der Einheit em ermöglicht die Reaktion auf Änderungen der Schriftgröße. Sie können dies testen, indem Sie die Größe Ihres jsFiddle-Fensters ändern.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

Sie können sogar mit dem box-shadow spielen, um ein paar schöne Schatten zu erzeugen, die mit der content: "• " -Lösung nicht gut aussehen.

24
Jose Rui Santos

Ich habe es versucht und die Dinge wurden komisch für mich. (css hat nach dem Teil :after {content: "";} dieses Tutorials aufgehört zu arbeiten. Ich habe festgestellt, dass Sie die Aufzählungszeichen mit color:#ddd; für das li -Element selbst ausmalen können.

Hier ist ein Beispiel.

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}
18
Benito

Ich benutze dafür jQuery:

jQuery('li').wrapInner('<span class="li_content" />');

& mit etwas CSS:

li { color: red; }
li span.li_content { color: black; }

vielleicht übertrieben, aber praktisch, wenn Sie für ein CMS codieren und Ihre Redakteure nicht bitten möchten, in jedes Listenelement eine zusätzliche Spanne einzufügen.

17
Veerle Verbert

Ich würde empfehlen, dem LI einen background-image und padding-left zu geben. Das list-style-image -Attribut ist in browserübergreifenden Umgebungen ein Flakey, und das Hinzufügen eines zusätzlichen Elements, z. B. eines Bereichs, ist nicht erforderlich. Ihr Code würde also ungefähr so ​​aussehen:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}
10

Das Einfachste, was Sie tun können, ist, den Inhalt des <li> in einen <span> oder ein gleichwertiges Element zu verpacken. Dann können Sie die Farbe unabhängig einstellen.

Alternativ können Sie ein Bild mit der gewünschten Aufzählungsfarbe erstellen und mit der Eigenschaft list-style-image festlegen.

9
Adam Bryzak

Eine Variation der Lea Vero -Lösung mit perfekter Einrückung in mehrzeiligen Einträgen könnte etwa so aussehen:

ul{
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
}

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}
8
David

Ich füge meine Lösung zu diesem Problem hinzu.

Ich möchte kein Bild verwenden und der Validator bestraft Sie, wenn Sie negative Werte in CSS verwenden. Deshalb gehe ich folgendermaßen vor:

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }
6
Kovo

Ich weiß, es ist ein bisschen spät für diesen Beitrag zu beantworten, aber als Referenz ...

CSS

ul {
    color: red;
}

li {
    color: black;
}

Die Farbe des Aufzählungszeichens wird auf dem ul-Tag definiert, und dann schalten wir die li-Farbe zurück.

5
webster76

Lea Verous Lösung ist gut, aber ich wollte mehr Kontrolle über die Position der Kugeln, also ist dies mein Ansatz:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}
3
Henning Fischer

In der Demo von Lea haben Sie eine andere Möglichkeit, ungeordnete Listen mit Rahmen zu erstellen: http://jsfiddle.net/vX4K8/7/

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

CSS

ul {
list-style: none;
margin: 0;
}

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}
3
user2188875