C'è un modo semplice per cambiare il colore di un punto elenco in un elenco?

https://stackoverflow.com/questions/76564

09-06-2019
|

Domanda

Tutto quello che voglio è poter cambiare il colore di un punto elenco in un elenco in grigio chiaro.Per impostazione predefinita è nero e non riesco a capire come cambiarlo.

So che potrei semplicemente usare un'immagine;Preferirei non farlo se posso aiutarlo.

Soluzione

Il punto elenco prende il colore dal testo.Pertanto, se desideri avere un punto elenco di colore diverso rispetto al testo nell'elenco, dovrai aggiungere del markup.

Avvolgi il testo dell'elenco in un intervallo:

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

Quindi modifica leggermente le regole di stile:

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

Altri suggerimenti

Ci sono riuscito senza aggiungere markup, ma utilizzando invece li:before.Questo ovviamente ha tutti i limiti di :before (nessun supporto per il vecchio IE), ma sembra funzionare con IE8, Firefox e Chrome dopo alcuni test molto limitati.Funziona nel nostro ambiente di controllo, ci chiediamo se qualcuno possa verificarlo.Lo stile del punto elenco è limitato anche da ciò che è contenuto 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>

Questo era impossibile nel 2008, ma presto diventerà possibile (si spera)!

Secondo La specifica CSS3 del W3C, puoi avere il controllo completo su qualsiasi numero, glifo o altro simbolo generato prima di un elemento dell'elenco con ::marker pseudo-elemento.Per applicarlo alla soluzione della risposta più votata:

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

Esempio di JSFiddle

Tienilo presente, però a partire da luglio 2016, questa soluzione è solo una parte della bozza di lavoro del W3C e non funziona ancora con i principali browser.

Se desideri questa funzionalità, procedi come segue:

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

il grosso problema con questo metodo è il markup extra.(il tag span)

Ciao, forse questa risposta è tardiva, ma è quella corretta per raggiungere questo obiettivo.

Ok, il fatto è che devi specificare un tag interno per far sì che il testo della LIst sia il solito nero (o qualunque cosa tu voglia ottenerlo).Ma è anche vero che puoi RIDEFINIRE eventuali TAG e tag interni con i CSS.Quindi il modo migliore per farlo usa un tag SHORTER per la ridefinizione

Usa questa definizione CSS:

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

E questo codice html:

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

Ottieni il risultato richiesto.Inoltre puoi rendere ogni disco di colore diverso:

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

Basta creare un punto elenco in un programma di grafica e utilizzarlo list-style-image:

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

Avvolgi il testo all'interno dell'elemento dell'elenco con un intervallo (o qualche altro elemento) e applica il colore del punto elenco all'elemento dell'elenco e il colore del testo all'intervallo.

Come da Specifiche del W3C,

L'elenco delle proprietà...non consentire agli autori di specificare uno stile distinto (colori, caratteri, allineamento, ecc.) per l'indicatore dell'elenco...

Ma l'idea con uno span nell'elenco sopra dovrebbe funzionare bene!

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

Puoi usare Jquery se hai molte pagine e non hai bisogno di andare a modificare tu stesso il markup.

Qui c'è un semplice esempio:

$("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
});

Per una domanda del 2008, ho pensato di aggiungere una risposta più recente e aggiornata su come modificare il colore dei punti elenco in un elenco.

Se sei disposto a utilizzare librerie esterne, Font Awesome ti offre icone vettoriali scalabili, e quando combinato con Classi di supporto di Bootstrap (per esempio. text-success), puoi creare elenchi davvero interessanti e personalizzabili.

Ho ampliato l'estratto da la pagina degli esempi di elenco di Font Awesome sotto:

Utilizzo fa-ul E fa-li per sostituire facilmente i punti elenco predefiniti negli elenchi non ordinati.

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

Carattere fantastico (principalmente) supporta IE8, e supporta IE7 solo se usi il file versione precedente 3.2.1.

Funziona anche se impostiamo il colore per ciascun elemento, ad esempio:Ho aggiunto un po' di margine a sinistra ora.

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

Potresti usare i CSS per raggiungere questo obiettivo.Specificando l'elenco nel colore e nello stile di tua scelta, puoi anche specificare il testo con un colore diverso.

Segui l'esempio su http://www.echoecho.com/csslists.htm.

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

Uno

Due

Tre

Basta usare i CSS:

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

Ti consigliamo di impostare uno "stile elenco" tramite CSS e assegnargli un colore:valore.Esempio:

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow