Boostrapの疑似チェックボックスの右寄せ

私はBoostrapの右詰めチェックボックスに関する質問に対する答えを見てきましたが、疑似クラスに関する疑問に対する答えはブートストラップのチェックボックスに使用しました。ラベルの重なりは無視されますが、私は逃げ出します）。Boostrapの疑似チェックボックスの右寄せ

私が探しているのは、これらのものの組み合わせです：右揃えのチェックボックス（チェックボックスの左側のラベルテキスト付き）チェックボックス）

フィドルが添付されています。私は 'Javascript'セクションにコメントを追加しました。どんな助けでも大歓迎です、私はこの仕事をしようと何時間も壁に頭を打っていました。明らかに私がやったことは実際には受け入れられません。前もって感謝します。

（注：チェックボックスの交換イメージが任意である、オンライン画像のために非常にクイック検索の製品は、機能の違いを説明するために）

フィドル：https://jsfiddle.net/qwucsh6x/8/

コードサンプル：

<body> 
    <div> 
    <input id="rjc" type="checkbox" class="pull-right"><label for="rjc" class="pull-right">right-justify checkbox</label> 
    </div><div> 
    <input id="sc" type="checkbox"> 
    <label for="sc">standard checkbox</label> 
    </div><div> 
    <input id="srjc" type="checkbox" class="rightStyled pull-right sr-only"> 
    <label for="srjc" class="pull-right">styled right-justify checkbox</label> 
    </div><div> 
    <input id="sty" type="checkbox" class="leftStyled sr-only"> 
    <label for="sty">styled checkbox</label> 
    </div> 
</body>

CSS：

input[type=checkbox].leftStyled + label { 
    background: url('http://image.flaticon.com/icons/png/128/61/61221.png') no-repeat; 
    background-size:20px; 
    text-indent:22px 
} 

input[type=checkbox]:checked.leftStyled + label { 
    background: url('https://cdn2.iconfinder.com/data/icons/menu-interface-1/256/flat_unchecked-128.png') no-repeat; 
    background-size:20px; 
    text-indent:22px 
} 

input[type=checkbox].rightStyled + label { 
    background: url('http://image.flaticon.com/icons/png/128/61/61221.png') no-repeat; 
    background-size:20px; 
    text-indent:-162px 
} 

input[type=checkbox]:checked.rightStyled + label { 
    background: url('https://cdn2.iconfinder.com/data/icons/menu-interface-1/256/flat_unchecked-128.png') no-repeat; 
    background-size:20px; 
    text-indent:-162px 
}

出典

2016-11-28 Paul Caron

あなたが探しているよりもちょっとハッキリかもしれませんが、私はあなたが持っているラベルからテキストを取り出し、それをそのラベルのラベルである新しいラベルに入れます。

<label for="srjclabel" class="pull-right">styled right-justify checkbox</label> 
<label for="srjc" id="srjclabel" class="pull-right"></label>

https://jsfiddle.net/qwucsh6x/9/

出典

2016-11-28 23:23:53

ありがとう！ 2番目のラベルの代わりにスパンを使うことで、このアプローチをもう少し進めました。また、私はクリックイベントハンドラを追加したので、疑似ラベルでチェックボックスを切り替えることも欲しかった。まだ少しハッキーですが、それは動作します。正しい方向に私を指してくれてありがとう。更新日：https://jsfiddle.net/qwucsh6x/10/ –

Boostrapの疑似チェックボックスの右寄せ

答えて

関連する問題