Html 如何使用 Font Awesome 为 CSS 复选框设置样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23305780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Style CSS Checkboxes with Font Awesome
提问by Greenhoe
I am trying to style my checkboxes with Font Awesome, the checkboxes are auto generated from a plugin I"m using with wordpress I have a mockup of what everything looks like in JSFiddle
我正在尝试使用 Font Awesome 为我的复选框设置样式，这些复选框是从我使用 wordpress 的插件自动生成的
It seems to be something a bit wrong with my CSS but I can't figure out what.
我的 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>
Here is the CSS
这是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 */
回答by Matheus
Ok, that CSS you have won't work because its wrong.
好的，您拥有的 CSS 将无法使用，因为它是错误的。
Why? Because when you say "input + label", you should have an HTML markup like the one below:
为什么？因为当你说“输入 + 标签”时，你应该有一个像下面这样的 HTML 标记：
<input type="checkbox" name="ofcards-rarity[]" value="15">
<label>Legendary (36)</label> //You will be querying this label css with input + label
See, <label>is placed immediately after <input>. You can confirm this HERE
看，<label>紧跟在 之后<input>。你可以在这里确认
Now in your case, your <input>was a child of you <label>, looking like this:
现在在你的情况下，你<input>是你的孩子<label>，看起来像这样：
<label>
<input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
</label>
To query that, you could have done something like this:
要查询，您可以执行以下操作：
label>input[type=checkbox] {
}
label>input[type=checkbox]:checked {
}
And since you wanted to put something beetwen them, you add this to your css:
并且由于您想在它们之间添加一些东西，因此将其添加到您的 css 中：
label>input[type=checkbox]:before {
}
label>input[type=checkbox]:checked:before {
}
I've adjusted it for you. It's not the easiest/cutest way to implement it, but at least works with your current HTML.
我已经为你调整好了。这不是实现它的最简单/最可爱的方法，但至少适用于您当前的 HTML。
Here's the FIDDLE
这是小提琴
回答by Maxwel D'souza
I created checkboxes and radio buttons using Font Awesome. The ones I found online had something or the other missing. I needed ones that could be scaled and I didn't want any unclickable gap between the checkbox and its label.
我使用 Font Awesome 创建了复选框和单选按钮。我在网上找到的那些丢失了某些东西。我需要可以缩放的，我不希望复选框和它的标签之间有任何不可点击的间隙。
Here are links to the repositoryand the demo
回答by BEJGAM SHIVA PRASAD
No JavaScript but small html manipulation like adding label with "for" attribute. so that when ever click on label checkbox click will trigger.
没有 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>