risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come impostare i colori dei proiettili negli elenchi html UL/LI tramite CSS senza utilizzare immagini o tag span

Immagina una semplice lista non ordinata con alcuni elementi <li>. Ora, ho definito i proiettili di forma quadrata tramite list-style:square; Tuttavia, se imposto il colore degli elementi <li> con color: #F00; allora everything diventa rosso!

Mentre voglio solo impostare il colore dei proiettili quadrati. C'è un modo elegante per definire il colore dei punti elenco in CSS ...

... senza usare immagini Sprite o tag span!

HTML

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

CSS

li{
   list-style:square;
}
489
Sam

Il modo più comune per farlo è qualcosa in questo senso:

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/

Funzionerà su tutti i browser, incluso IE dalla versione 8 in poi.

995
Lea Verou

navigando qualche tempo fa, trovato questo sito, hai provato questa alternativa?

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

sembra difficile, ma puoi creare il tuo png image/patternhere, quindi copiare/incollare il codice e personalizzare i tuoi proiettili =) stills eleganti?

MODIFICARE:

seguendo l'idea di @ lea-verou sull'altra risposta e applicando questa filosofia di miglioramento delle fonti esterne sono giunto a questa altra soluzione:

  1. inserisci nella tua testa il foglio di stile della libreria di icone Webfont, in questo caso Font Awesome:

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

  1. prendi un codice da FontAwesome cheatsheet (o qualsiasi altra icona webfont).
i.e.:
fa-angle-right [&#xf105;]

e usa l'ultima parte di f ... seguita da un numero come questo, anche con font-family:

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

e questo è tutto! ora hai anche suggerimenti sui proiettili personalizzati =)

fiddle

87

La specifica corrente del CSS 3 Lists module specifica lo pseudo-elemento ::marker che farebbe esattamente quello che vuoi; FF è stato testato per non supportare ::marker e dubito che Safari o Opera ce l'abbiano. IE, ovviamente, non lo supporta.

Quindi adesso, l'unico modo per farlo è usare un'immagine con list-style-image.

Suppongo che tu possa racchiudere il contenuto di un li con un span e che tu possa impostare il colore di ciascuno, ma questo mi sembra un po 'logico.

45
Alex

Ho semplicemente risolto questo problema in questo modo, che dovrebbe funzionare in tutti i browser:

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

Un modo per farlo è usare li:before con content: "" e designarlo come elemento inline-block.

Ecco uno snippet di codice funzionante:

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

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

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>
41
Rahul Desai

Tuttavia, un'altra soluzione consiste nell'utilizzare uno pseudo elemento :before con un border-radius: 50%. Funzionerà su tutti i browser, incluso IE 8 e versioni successive.

L'utilizzo dell'unità em consente di rispondere alle modifiche alle dimensioni dei caratteri. Puoi testare questo, ridimensionando la tua finestra jsFiddle.

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

Puoi persino giocare con box-shadow per creare delle belle ombre, qualcosa che non sembrerà bella con la soluzione content: "• ".

24
Jose Rui Santos

Ho provato questo e le cose sono diventate strane per me. (css ha smesso di funzionare dopo la parte :after {content: "";} di questo tutorial.Ho trovato che puoi colorare i proiettili usando solo color:#ddd; sull'elemento li stesso.

Ecco unesempio.

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

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

Io uso jQuery per questo:

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

e con alcuni CSS:

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

forse eccessivo, ma a portata di mano se si sta codificando per un CMS e non si vuole chiedere ai propri editori di aggiungere un'estensione extra in ogni elenco.

17
Veerle Verbert

Consiglierei di dare LI a background-image e padding-left. L'attributo list-style-image è flakey negli ambienti cross-browser e l'aggiunta di un elemento extra, come una span, non è necessaria. Quindi il tuo codice finirebbe per sembrare qualcosa del genere:

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

La cosa più semplice che puoi fare è avvolgere il contenuto del <li> in un <span> o equivalente, quindi puoi impostare il colore in modo indipendente.

In alternativa, è possibile creare un'immagine con il colore di riferimento desiderato e impostarla con la proprietà list-style-image.

9
Adam Bryzak

Una variazione di Lea Verou soluzione con indentazione perfetta in voci multi-linea potrebbe essere qualcosa del genere:

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

Sto aggiungendo la mia soluzione a questo problema.

Non voglio usare l'immagine e il validatore ti punirà per l'utilizzo di valori negativi nei CSS, quindi procedo in questo modo:

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

So che è un po 'una risposta tardiva per questo post, ma per riferimento ...

CSS

ul {
    color: red;
}

li {
    color: black;
}

Il colore del proiettile è definito sul tag ul e quindi si ripristina il colore li.

5
webster76

La soluzione Lea Verous è buona ma volevo un maggiore controllo sulla posizione dei proiettili, quindi questo è il mio approccio:

.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

Prendendo la demo di Lea, ecco un modo diverso di creare liste non ordinate, con bordi: 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