如何使用Font Awesome样式化CSS复选框

Question

我正在尝试使用Font Awesome样式化我的复选框，这些复选框是由我在WordPress上使用的插件自动生成的。我有一个JSFiddle模型，展示了所有内容的外观。

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

看起来我的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 */

- Greenhoe

---

你看过这两个吗：http://jsfiddle.net/8PYJg/ 和 https://dev59.com/cmgu5IYBdhLWcg3wln8O？ - evan

是的，CSS似乎不能与我的HTML配合使用，我无法调整HTML，因为它是由插件输出的。 - Greenhoe

Answer 1

好的，你现有的CSS不起作用是因为它是错误的。

为什么呢？因为当你使用"input + label"时，你应该具有像下面这样的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。

- Matheus

---

非常感谢！我非常感激你帮助我完成这个。 - Greenhoe

Answer 2

No JavaScript but small html manipulation like adding label with "for" attribute. so that when ever click on label checkbox click will trigger.

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

- BEJGAM SHIVA PRASAD

Answer 3

我使用Font Awesome创建了复选框和单选按钮。我在网上找到的有些遗漏了一些东西。我需要的是可以调整大小的，而且我不想在复选框和标签之间留下任何不能被点击的空白。

以下是存储库和演示的链接。

- Maxwel D'souza

---

你的解决方案存在问题，它不可访问。 - technophyle