Comment de Style CSS les Cases à cocher avec la Police Impressionnant
Je suis en train de style de mes cases à cocher avec la Police Génial, les cases sont générés automatiquement à partir d'un plugin que j'"m aide avec wordpress, j'ai une maquette de ce que tout ressemble dans JSFiddle
Il semble être quelque chose d'un peu de mal avec mon CSS mais je n'arrive pas à comprendre quoi.
<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>
Voici le 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 */
avez-vous regardé l'un de ces: jsfiddle.net/8PYJg: stackoverflow.com/questions/11223615/...?
Oui, et le CSS ne semble pas fonctionner avec mon code HTML, je ne peux pas régler le code HTML car il est outputed par un plugin.
Oui, et le CSS ne semble pas fonctionner avec mon code HTML, je ne peux pas régler le code HTML car il est outputed par un plugin.
OriginalL'auteur Greenhoe | 2014-04-26
Vous devez vous connecter pour publier un commentaire.
Ok, CSS que vous avez de ne pas travailler à cause de son mal.
Pourquoi? Parce que quand vous dites "entrée + étiquette", vous devriez avoir une balise HTML comme celle ci-dessous:
Voir,
<label>
est placé immédiatement après<input>
. Vous pouvez le vérifier ICIMaintenant, dans votre cas, votre
<input>
était un enfant de vous<label>
, ressemblant à ceci:À la requête, vous pourriez faire quelque chose comme ceci:
Et puisque vous avez voulu mettre quelque chose entre eux, vous ajoutez ceci à votre css:
J'ai ajusté pour vous. Ce n'est pas la plus facile et la plus belle façon de le mettre en œuvre, mais au moins, fonctionne avec votre HTML.
Voici la VIOLON
OriginalL'auteur Matheus
J'ai créé les cases à cocher et des boutons radio à l'aide de la Police Impressionnant. Ceux que j'ai trouvé en ligne a quelque chose ou l'autre manque. J'ai besoin de ceux qui pourraient être mis à l'échelle et je ne voulais pas de unclickable écart entre la case et de son étiquette.
Voici des liens vers les référentiel et la démo
OriginalL'auteur Maxwel D'souza