Cambiare il colore di un proiettile in un elenco html?

86

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

So che potrei usare solo un'immagine; Preferisco non farlo se posso evitarlo.

html css html-lists

— Dave Haynes
fonte

Vorrei solo andare con un'immagine io stesso ed evitare il markup extra. È probabilmente la soluzione più efficiente

— Sam Murray-Sutton

8

Chi se ne frega del markup "extra" come questo ... sul serio, non perdi nulla facendolo.

159

Il proiettile prende il colore dal testo. Quindi, se vuoi avere un punto elenco di colore diverso dal testo nella tua lista, dovrai aggiungere del markup.

Racchiudi 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 tue regole di stile:

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

— Prestaul
fonte

Esattamente quello di cui avevo bisogno! Ho un elenco di collegamenti e ai collegamenti è già applicato comunque uno stile di colore diverso.

— Dave Haynes,

Questo non è il modo migliore per farlo. Ad esempio, questo non funzionerà quando hai un cms in giro con un editor WYSIWYG. Gli elementi <span> non verranno visualizzati. Quello che potresti voler è lavorare con: prima e: dopo e tralasciare i bullit stessi. Questa è in realtà una pessima pratica.

— Automagisch

2

@KoenHoutman, al momento in cui è stato scritto (2008) era l'unica tecnica con un supporto ragionevole. Anche oggi non è una cattiva pratica ed è ancora la tecnica con il più ampio supporto di browser, anche se sono d'accordo che oggi (nella maggior parte dei casi) opterei per l'utilizzo :beforecome nella risposta di Marc di seguito.

— Prestaul

Poiché stai solo modificando la presentazione del testo, un btag sarebbe più appropriato.

— Supuhstar

45

Ci sono riuscito senza aggiungere markup, ma invece 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. Funziona nel nostro ambiente di controllo, chiedendosi se qualcuno possa controllarlo. Lo stile del proiettile è anche 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>

— Marc
fonte

Questo è il modo più moderno con CSS3, rispetto alla risposta accettata

— minni

17

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

Secondo la specifica W3C CSS3 , puoi avere il pieno controllo su qualsiasi numero, glifo o altro simbolo generato prima di una voce di elenco con lo ::markerpseudo-elemento. 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 di JSFiddle

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

Se vuoi questa funzione, procedi come segue:

— Supuhstar
fonte

6

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

— Jonathan Arkell
fonte

Poiché stai solo modificando la presentazione del testo, un btag sarebbe più appropriato.

— Supuhstar

1

Quando è stato scritto, il tag b stava per essere deprecato a favore del tag forte. Ma sì, hai ragione, ora un tag ab sarebbe più appropriato.

— Jonathan Arkell

3

Ciao forse questa risposta è in ritardo ma è quella corretta per ottenere questo risultato.

Ok, il fatto è che devi specificare un tag interno per fare in modo che il testo LIst sia sul solito nero (o qualsiasi cosa tu voglia ottenerlo). Ma è anche vero che puoi RIDEFINIRE qualsiasi TAG e tag interno 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 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>

dovresti usare <span>. inoltre, <b> è deprecato.

— the_drow

2

Punto di contrasto a @the_drow, <b> non è deprecato. stackoverflow.com/questions/1348683/...

— Strixy

L'impostazione di un colore predefinito applicato a un selettore specifico ha risolto il problema. Grazie per il consiglio.

— David

2

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

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

— ghr
fonte

1

L'OP esplicitamente non voleva usare un'immagine, ma mi sono imbattuto in questo cercando un modo generale per sostituire il proiettile. Quindi penso che questa risposta sia carina per completezza.

— Zane

Eccone uno con il cerchio SVG, che si può colorare facilmente:

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

— Ciantic

0

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.

0

Secondo le specifiche W3C ,

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

Ma l'idea con un intervallo all'interno dell'elenco sopra dovrebbe funzionare bene!

— Eone
fonte

0

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

0

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

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

— alaasdk
fonte

0

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

Se sei disposto a utilizzare librerie esterne, Font Awesome ti offre icone vettoriali scalabili e, se combinato con le classi helper di Bootstrap (ad es. text-success), Puoi creare degli elenchi piuttosto interessanti e personalizzabili.

Ho ampliato l'estratto dalla pagina degli esempi dell'elenco di Font Awesome di seguito:

Usa fa-ule fa-liper sostituire facilmente i punti elenco predefiniti in 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>

Espandi lo snippet

Font Awesome (principalmente) supporta IE8 e supporta IE7 solo se usi la versione precedente 3.2.1 .

— uovo
fonte

0

Funziona anche se impostiamo il colore per ogni 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;
}

— Mohammed
fonte

-1

Puoi usare i CSS per ottenere questo risultato. Specificando l'elenco nel colore e nello stile di tua scelta, puoi anche specificare il testo come un colore diverso.

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

-1

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

Uno

Due

Tre

— NerdFury
fonte

-2

Usa semplicemente CSS:

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

— Diodeus - James MacFarlane
fonte

Sì, è quello che pensavo anch'io ... ma lo stile del colore cambia il colore del testo e del punto elenco.

— Aeon

-5

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

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

— ahockley
fonte