Come stile CSS Caselle con carattere impressionante

Question

sto cercando per lo stile mie caselle di controllo con carattere impressionante, le caselle sono auto generati da un plugin I "m utilizzando con wordpress Ho un mockup di quello che tutto appare come in JSFiddle

http://jsfiddle.net/bBPY5/1/

sembra essere qualcosa di un po 'sbagliato con il mio CSS ma non riesco a capire cosa.

<div id="sidebar-cards-archive"> 
<ul> 
    <li class="cat-item cat-item-12"> 
     <label> 
      <input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label> 
    </li> 
    <li class="cat-item cat-item-14"> 
     <label> 
      <input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label> 
    </li> 
    <li class="cat-item cat-item-11"> 
     <label> 
      <input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label> 
    </li> 
    <li class="cat-item cat-item-15"> 
     <label> 
      <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label> 
    </li> 
    <li class="cat-item cat-item-13"> 
     <label> 
      <input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label> 
    </li> 
</ul> 
</div> 

Ecco il CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
#sidebar-cards-archive ul li { 
    list-style: none; 
} 
/*** custom checkboxes ***/ 
input[type=checkbox] { 
    display:none; 
} 
/* to hide the checkbox itself */ 
input[type=checkbox] + label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
} 
input[type=checkbox] + label:before { 
    content:"\f096"; 
} 
/* unchecked icon */ 
input[type=checkbox] + label:before { 
    letter-spacing: 10px; 
} 
/* space between checkbox and label */ 
input[type=checkbox]:checked + label:before { 
    content:"\f046"; 
} 
/* checked icon */ 
input[type=checkbox]:checked + label:before { 
    letter-spacing: 5px; 
} 
/* allow space for check mark */ 

Answer 1

Ok, quel CSS che hai non funzionerà perché è sbagliato.

Perché? Perché quando si dice "ingresso + etichetta", si dovrebbe avere un codice HTML come quello qui sotto:

<input type="checkbox" name="ofcards-rarity[]" value="15"> 
<label>Legendary (36)</label> //You will be querying this label css with input + label 

Sede, <label> è posto subito dopo <input>. È possibile confermare questa HERE

Ora nel tuo caso, il vostro <input> era un bambino di voi <label>, cercando in questo modo:

<label> 
      <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36) 
</label> 

Per interrogare che, avresti potuto fare qualcosa di simile:

label>input[type=checkbox] { 

} 
label>input[type=checkbox]:checked { 

} 

E dal momento che si voleva mettere qualcosa beetwen loro, si aggiunge questo al tuo css:

label>input[type=checkbox]:before { 

} 
label>input[type=checkbox]:checked:before { 

} 

L'ho modificato per te. Non è il modo più semplice/più carino per implementarlo, ma almeno funziona con il tuo HTML corrente.

Ecco il FIDDLE

Answer 2

ho creato le caselle di controllo e pulsanti di opzione utilizzando dei caratteri impressionante. Quelli che ho trovato online avevano qualcosa o l'altro mancante. Avevo bisogno di quelli che potessero essere ridimensionati e non volevo alcuno spazio inattaccabile tra la casella di controllo e la sua etichetta.

Qui ci sono collegamenti al repository e la demo

Answer 3

No JavaScript ma piccola manipolazione html come l'aggiunta di un'etichetta con attributo "for". in modo che quando si fa clic sulla casella di controllo dell'etichetta clic si inneschi.

.form input[type="checkbox"]{ 
 
    display:none; 
 
} 
 
.form input[type="checkbox"] + label.fa { 
 
    color: #88E2E2; 
 
    font-size: 25px; 
 
    width: 25px; 
 
    height: 25px; 
 
    cursor: pointer; 
 
} 
 
.form input[type="checkbox"]:checked +label.fa{ 
 
    background: #fff; 
 
} 
 
.form input[type="checkbox"] + label.fa:before { 
 
    display:inline-block; 
 
    content: "\f096"; 
 
    cursor:pointer; 
 
} 
 

 
.form input[type="checkbox"]:checked +label.fa:before{ 
 
    content:"\f046"; 
 
    position: relative; 
 
    left: 2px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <form class="form"> 
 
    <input id="check_1" type="checkbox"/><label class="fa" for="check_1"></label> 
 
      <input id="check_2" type="checkbox"/><label class="fa" for="check_2"></label> 
 
    <input id="check_3" type="checkbox"/><label class="fa" for="check_3"></label> 
 

 
    </form>