Cambia il colore dei punti elenco di un elenco HTML senza utilizzare lo span

Mi chiedevo se esiste un modo per cambiare il colore dei proiettili in un elenco.

Ho una lista come questa:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

Non è possibile per me inserire nulla nei li come un 'span' og a 'p'. Quindi posso cambiare il colore dei proiettili ma non il testo in qualche modo intelligente?

Se puoi usare un'immagine, puoi farlo. E senza un'immagine non sarai in grado di cambiare solo il colore dei punti elenco e non il testo.

Utilizzando un'immagine

li { list-style-image: url(images/yourimage.jpg); }

Vedere

list-style-image

Senza usare un'immagine

Quindi devi modificare il markup HTML e includere uno span nell'elenco e colorare li e span con colori diversi.

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. Lo stile del proiettile è anche limitato da ciò che è in Unicode.

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Possiamo combinare list-style-imagecon svgs, che possiamo inline in css ! Questo metodo offre un controllo incredibile sui "proiettili", che possono diventare qualsiasi cosa.

Per ottenere un cerchio rosso, usa il seguente CSS:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

Ma questo è solo l'inizio. Questo ci permette di fare qualsiasi cosa pazza con quei proiettili. cerchi o rettangoli sono facili, ma tutto ciò che puoi disegnare con svglo puoi attaccare lì! Guarda l'esempio di bullseye qui sotto:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Attributi di larghezza / altezza

Alcuni browser richiedono widthche gli heightattributi siano impostati su <svg>oppure non visualizzano nulla. Al momento della scrittura, le versioni recenti di Firefox presentano questo problema. Ho impostato entrambi gli attributi negli esempi.

Codifiche

Un commento recente mi ha ricordato le codifiche per data-uri. Questo è stato un punto dolente per me di recente e posso condividere un po 'di informazioni che ho ricercato.

La specifica data-uri , che fa riferimento alla specifica URI , dice che svg dovrebbe essere codificato in base alla specifica URI . Ciò significa che tutti i tipi di caratteri dovrebbero essere codificati, ad esempio <diventa %3C.

Alcune fonti suggeriscono la codifica base64, che dovrebbe risolvere i problemi di codifica, tuttavia aumenterà inutilmente la dimensione dell'SVG, mentre la codifica URI no. Raccomando la codifica URI.

Ulteriori informazioni:

supporto browser: > ie8

css trucchi su svgs

mdn su svgs

Sviluppando la soluzione di @ Marc - poiché il carattere del punto elenco viene reso in modo diverso con diversi tipi di carattere e browser, ho utilizzato la seguente tecnica css3 con border-radius per creare un punto su cui ho maggiore controllo:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

So che questa è davvero, davvero, una vecchia domanda, ma stavo giocando con questo e ho trovato un modo che non avevo visto pubblicato. Assegna un colore all'elenco e quindi sovrascrivi il colore del testo utilizzando il ::first-lineselettore. Non sono un esperto quindi forse c'è qualcosa di sbagliato in questo approccio che mi manca, ma sembra funzionare.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Sviluppando sia le soluzioni @Marc che @jessica - Questa è la soluzione che utilizzo:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

Io uso emper le dimensioni dei caratteri, quindi se imposti il ​​tuo topvalore .5emsarà sempre posizionato al centro della tua prima riga di testo. L'ho usato left:-20pxperché questa è la posizione predefinita dei punti elenco nei browser: genitore padding/2

Mi è piaciuta molto anche la risposta di Marc: avevo bisogno di un set di UL di colore diverso e ovviamente sarebbe stato più facile usare solo una classe. Ecco cosa ho usato per l'arancia, ad esempio:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Inoltre, ho scoperto che il codice esadecimale che ho usato per "contenuto:" era diverso da quello di Marc (quel cerchio esadecimale sembrava essere un po 'troppo alto). Quello che ho usato sembra stare perfettamente nel mezzo. Ho anche trovato molte altre forme (quadrati, triangoli, cerchi, ecc.) Proprio qui

Per me l'opzione migliore è usare pseudo elementi CSS, quindi per disclo stile dei proiettili sarebbe simile a questo:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Appunti:

• widthe heightdovrebbe avere valori uguali per mantenere i puntatori arrotondati
• puoi impostare border-radiusa zero se vuoi avere squareelenchi puntati

Per più stili di punti elenco puoi utilizzare altre forme CSS https://css-tricks.com/examples/ShapesOfCSS/ (scegli questo che non richiede pseudo elementi per funzionare, quindi ad esempio triangoli)

:: marker

È possibile utilizzare lo ::markerpseudo-elemento CSS per selezionare il riquadro del contrassegno di un elemento dell'elenco (ad es. Punti elenco o numeri).

ul li::marker {
  color: red;
}

Nota: al momento della pubblicazione di questa risposta, questa è considerata una tecnologia sperimentale ed è stata implementata solo in Firefox e Safari (finora).

Basandosi sulla risposta di @ ddilsaver. Volevo essere in grado di usare uno sprite per il proiettile. Questo sembra funzionare:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

L'ho provato oggi e
ho digitato questo: avevo bisogno di visualizzare gli indicatori di colore nei miei elenchi (sia punti elenco che numeri). Mi sono imbattuto in questo suggerimento e ho scritto nel mio foglio di stile con la mutualizzazione delle proprietà:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

Ho scelto un personaggio diverso per visualizzare un proiettile, guardandolo qui . Avevo bisogno di regolare il margine in modo responsabile, forse i valori non si applicheranno al carattere che hai scelto (i numeri usano il tuo carattere web).

Prova a usare questo invece:

ul {
  color: red;
}

Versione in linea, funziona per Outlook Desktop:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .