Wie CSS Ankreuzfelder mit Font Style Super

Question

Ich versuche, meine Kontrollkästchen mit Font Awesome, die Kontrollkästchen werden automatisch generiert aus einem Plugin I "verwende mit Wordpress ich um Stil haben eine Attrappe, was alles sieht aus wie in JSFiddle

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

Es scheint etwas ein bisschen falsch mit meinem CSS zu sein, aber ich kann nicht herausfinden, was.

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

Hier ist die 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, das CSS, das Sie haben, wird nicht funktionieren, weil es falsch ist.

Warum? Denn wenn Sie "input + label" sagen, sollten Sie eine HTML-Markup wie unten haben:

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

See, <label> platziert wird unmittelbar nach <input>. Sie können diese in Ihrem Fall HERE

nun bestätigen, Ihr <input> war ein Kind von dir <label>, wie folgt aussehen:

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

dass abzufragen, können Sie so etwas getan haben könnte:

label>input[type=checkbox] { 

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

} 

Und da Sie etwas beetwen sie setzen wollte, Sie dies zu Ihrem CSS hinzufügen:

label>input[type=checkbox]:before { 

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

} 

Ich habe es für Sie angepasst. Es ist nicht der einfachste/süßeste Weg, es zu implementieren, aber es funktioniert zumindest mit Ihrem aktuellen HTML.

Hier ist die FIDDLE

Answer 2

I erstellt Checkboxen und Radiobuttons Font Ehrfürchtig. Die, die ich online gefunden habe, haben etwas fehlt. Ich brauchte solche, die skaliert werden konnten, und ich wollte keine unüberwindbare Lücke zwischen der Checkbox und ihrem Label.

Hier sind Links zu den repository und der demo

Answer 3

Kein JavaScript, aber kleine HTML-Manipulation wie Label Zugabe mit "for" -Attribut. so dass, wenn Sie auf Label klicken Checkbox wird ausgelöst.

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