web-dev-qa-db-ja.com

素晴らしいフォントでCSSチェックボックスをスタイルする方法

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 */
htmlcsscheckboxfont-awesome
11
Greenhoe

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 [〜＃〜] です

14
Matheus

Font Awesomeを使用してチェックボックスとラジオボタンを作成しました。私がオンラインで見つけたものは、何かが欠けていました。拡大縮小できるものを必要としていて、チェックボックスとそのラベルの間にクリックできないギャップを作りたくありませんでした。

repository および demo へのリンクを次に示します。

4
Maxwel D'souza

JavaScriptはありませんが、 " for "属性でラベルを追加するような小さなHTML操作です。そのため、ラベルチェックボックスをクリックすると、クリックがトリガーされます。 enter image description here

    .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>
1
BEJGAM SHIVA PRASAD