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 */
OK、その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 [〜#〜] です
Font Awesomeを使用してチェックボックスとラジオボタンを作成しました。私がオンラインで見つけたものは、何かが欠けていました。拡大縮小できるものを必要としていて、チェックボックスとそのラベルの間にクリックできないギャップを作りたくありませんでした。
repository および demo へのリンクを次に示します。
JavaScriptはありませんが、 " for "属性でラベルを追加するような小さなHTML操作です。そのため、ラベルチェックボックスをクリックすると、クリックがトリガーされます。
.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>