it-swarm.it

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

Tutto quello che voglio è poter cambiare il colore di un proiettile in una lista in un grigio chiaro. Il valore predefinito è nero e non riesco a capire come cambiarlo.

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

81
Dave Haynes

Il proiettile prende il colore dal testo. Quindi, se vuoi avere un punto di colore diverso rispetto al testo nel tuo 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 */
}
156
Prestaul

Sono riuscito a farlo senza aggiungere markup, ma usando li: before. Questo ovviamente ha tutti i limiti di :before (nessun vecchio supporto IE), ma sembra funzionare con IE8, Firefox e Chrome dopo alcuni test molto limitati. Sta funzionando nel nostro ambiente di controllo, chiedendo se qualcuno potrebbe controllare questo. Lo stile bullet è inoltre limitato da ciò che è 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>
44
Marc

Questo era impossibile nel 2008, ma sta diventando possibile presto (si spera)!

Secondo La specifica CSS3 di W3C , puoi avere il pieno controllo su qualsiasi numero, glifo o altro simbolo generato prima di un elemento della lista con lo pseudo-elemento ::marker . Per applicare questo 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 JSFiddle

Si noti, tuttavia, che a partire da luglio 2016, questa soluzione è solo una parte del Draft di lavoro W3C e non funziona ancora con i principali browser.

Se desideri questa funzione, procedi nel seguente modo:

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

5
Jonathan Arkell

Basta fare un proiettile in un programma di grafica e utilizzare list-style-image:

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

Ciao forse questa risposta è in ritardo ma è quella giusta per raggiungere questo obiettivo.

Ok, il fatto è che devi specificare un tag interno per fare in modo che il testo di LIst sia sul solito nero (o che cosa vuoi ottenere). Ma è anche vero che puoi ridefinire qualsiasi TAG e tag interni con 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 colore diverso da ogni disco:

<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

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

0
user4903

Funziona anche se impostiamo il colore per ogni elemento, ad esempio: Ho aggiunto un 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;
}
0
Mohammed

Come da Spec. W3C

Le proprietà dell'elenco ... non consentono agli autori di specificare uno stile distinto (colori, caratteri, allineamento, ecc.) Per il marcatore dell'elenco ...

Ma l'idea con una spanna nella lista qui sopra dovrebbe funzionare bene!

0
Aeon

Puoi usare Jquery se hai molte pagine e non devi andare a modificare 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
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

Per una domanda del 2008, ho pensato di aggiungere una risposta più recente e aggiornata su come si può cambiare il colore dei punti elenco in una lista.

Se sei disposto ad usare le librerie esterne, Font Awesome ti offre icone vettoriali scalabili , e quando combinato con Le classi helper di Bootstrap (ad esempio text-success), puoi creare degli elenchi piuttosto interessanti e personalizzabili.

Ho espanso l'estratto da la pagina di esempi dell'elenco Font Awesome below:

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

Font Awesome (per lo più) supporta IE8 , e supporta solo IE7 se si utilizza versione precedente 3.2.1 .

0
eggy