如何使用 Font Awesome 设置 CSS 复选框的样式

Posted 2023-02-21

【中文标题】如何使用 Font Awesome 设置 CSS 复选框的样式

【英文标题】：How to Style CSS Checkboxes with Font Awesome

【发布时间】：2014-06-11 21:58:06

【问题描述】：

我正在尝试使用 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 */

【问题讨论】：

您是否查看过以下任何一个：jsfiddle.net/8PYJg，以及这个：***.com/questions/11223615/…？

是的，CSS 似乎不适用于我的 html，我无法调整 HTML，因为它是由插件输出的。

【参考方案1】：

好的，您的 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> 之后。你可以确认这个HERE

现在，在您的情况下，您的 <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

【讨论】：

非常感谢！非常感谢您帮我解决这个问题。

【参考方案2】：

我使用 Font Awesome 创建了复选框和单选按钮。我在网上找到的那些有什么或另一个缺失。我需要那些可以缩放的，我不希望复选框和它的标签之间有任何不可点击的间隙。

这里是repository 和demo 的链接

【讨论】：

您的解决方案的问题是无法访问。

【参考方案3】：

没有 javascript，但有小的 html 操作，例如添加带有“for”属性的标签。这样当点击标签复选框时，点击就会触发。

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