Question

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

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

}

既然你想把它们放在beetwen上，你可以将它添加到你的css中：

label>input[type=checkbox]:before {

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

}

我已经为你调整过了。这不是实现它的最简单/最可爱的方式，但至少可以使用当前的HTML。

这是FIDDLE

Answer 2

我使用Font Awesome创建了复选框和单选按钮。我在网上找到的那些东西或其他东西丢失了。我需要那些可以缩放的，我不希望复选框和它的标签之间有任何不可忽略的差距。

以下是指向repository和demo

的链接

Answer 3

没有JavaScript但是小的html操作，比如使用＆＃34; for＆＃34;添加标签属性。这样当点击标签复选框时，单击将触发。

＆＃13;

#include <stdio.h>
#include <stdlib.h>

int main()
{
    printf("This is a program which calculates your balance each year for 5 years! \n");

    char name [30];
    float principal;
    float interestRate;
    int interestType;
    int age;

    printf("Start by entering your name \n");
    scanf("%s", name);

    printf("Please enter the type of interest you earn (Simple = 1, Compound = 2) \n");
    scanf("%d", interestType);

    if (interestType == 1)
    {
        printf("You have chosen your interest type as simple \n");

        printf("Please enter your age \n");
        scanf(" %d", &age);

        // IF statement
        if (age < 18)
        {
            printf("You're not eligible for a bank account yet");
        }
        // ELSEIF statement
        else if (age > 122)
        {
            printf("Please submit your age to the Guinness Book of World Records and try again");
        }
        //ELSE statement
        else
        {
            printf("Please enter your current account balance \n");
            scanf(" %f", &principal);

            //Nested IF statement
            if (principal == 0)
            {
                printf("You don't have any balance, please fill money in your account and try again \n");
            }
            else
            {
                printf("Please enter the rate of interest at which your money is being multiplied \n");
                scanf(" %f", &interestRate);

                // principal *= interestRate is the same as principal = principal * interestRate
                principal = principal + interestRate;
                printf("%s's balance after 1 year will be %f \n", name, principal);

                principal = principal + interestRate;
                printf("%s's balance after 2 years will be %f \n", name, principal);

                principal = principal + interestRate;
                printf("%s's balance after 3 years will be %f \n", name, principal);

                principal = principal + interestRate;
                printf("%s's balance after 4 years will be %f \n", name, principal);

                principal = principal + interestRate;
                printf("%s's balance after 5 years will be %f \n", name, principal);

                printf("Thats all");
            }
        }
    }

    else if (interestType == 2)
    {
        printf("You have chosen your interest type as compound \n");

        printf("Please enter your age \n");
        scanf(" %d", &age);

        // IF statement
        if (age < 18)
        {
            printf("You're not eligible for a bank account yet");
        }
        // ELSEIF statement
        else if (age > 122)
        {
            printf("Please submit your age to the Guinness Book of World Records and try again");
        }
        //ELSE statement
        else
        {
            printf("Please enter your current account balance \n");
            scanf(" %f", &principal);

            //Nested IF statement
            if (principal == 0)
            {
                printf("You don't have any balance, please fill money in your account and try again \n");
            }
            else
            {
                printf("Please enter the rate of interest at which your money is being multiplied \n");
                scanf(" %f", &interestRate);

                // principal *= interestRate is the same as principal = principal * interestRate
                principal *= interestRate;
                printf("%s's balance after 1 year will be %f \n", name, principal);

                principal *= interestRate;
                printf("%s's balance after 2 years will be %f \n", name, principal);

                principal *= interestRate;
                printf("%s's balance after 3 years will be %f \n", name, principal);

                principal *= interestRate;
                printf("%s's balance after 4 years will be %f \n", name, principal);

                principal *= interestRate;
                printf("%s's balance after 5 years will be %f \n", name, principal);

                printf("Thats all");
            }
        }
    }

    return 0;
}

＆＃13;

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

＆＃13;

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

3 个答案: