Jak stylów CSS wyboru czcionką Niesamowite

Question

Staram się projektować moje wyboru z Font Awesome, pola wyboru są automatycznie generowane z wtyczką I "Korzystam z wordpress Mam makieta co wszystko wygląda w JSFiddle

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

wydaje się być czymś trochę nie tak z moim CSS, ale nie mogę dowiedzieć się, co.

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

Oto 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, ten CSS, który masz, nie będzie działał, ponieważ jest nieprawidłowy.

Dlaczego? Bo kiedy mówisz „input + etykieta”, należy mieć znaczników HTML, jak ten poniżej:

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

See, <label> jest umieszczony bezpośrednio po <input>. Można to potwierdzić HERE

Teraz w twoim przypadku, twój <input> był dzieckiem z was <label>, patrząc tak:

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

Aby zapytać, że mogłeś zrobić coś takiego:

label>input[type=checkbox] { 

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

} 

A ponieważ chciał umieścić coś beetwen nich dodać to do Twojego CSS:

label>input[type=checkbox]:before { 

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

} 

Dostosowałem to dla Ciebie. To nie jest najłatwiejszy/najsłodszy sposób na jego implementację, ale przynajmniej działa z twoim bieżącym HTML.

Oto FIDDLE

Answer 2

stworzyłem wyboru i przyciski radiowe czcionką niesamowite. Te, które znalazłem w Internecie, nie miały czegoś lub czegoś innego. Potrzebowałem tych, które można skalować, i nie chciałem żadnej niewykrywalnej luki między polem wyboru a jego etykietą.

Oto linki do repository i demo

Answer 3

nr JavaScript, ale mała manipulacja html jak dodanie etykietę z atrybutem „for”. tak, aby po kliknięciu pola wyboru etykiety kliknięcie zostanie uruchomione.

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