我正在尝试使用Font Awesome设置我的复选框的样式，这些复选框是从我与wordpress一起使用的插件自动生成的，我对JSFiddle中的所有内容都有一个样机
我的CSS似乎有点问题，但我不知道是什么。
<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>
这是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 */
好的，您使用的CSS无法正常工作，因为它是错误的。
为什么？因为当您说“输入+标签”时，您应该具有如下所示的HTML标记：
<input type="checkbox" name="ofcards-rarity[]" value="15">
<label>Legendary (36)</label> //You will be querying this label css with input + label
请参阅，<label>紧接着放置<input>。您可以在这里确认
现在，对于您来说，您<input>是您的孩子<label>，看起来像这样：
<label>
<input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
</label>
要进行查询，您可以执行以下操作：
label>input[type=checkbox] {
}
label>input[type=checkbox]:checked {
}
并且由于您想添加一些甜菜，您可以将其添加到CSS中：
label>input[type=checkbox]:before {
}
label>input[type=checkbox]:checked:before {
}
我已经为您调整了。这不是实现它的最简单/最简单的方法，但至少可以与当前的HTML一起使用。
这是FIDDLE
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句