web-dev-qa-db-ja.com

純粋なCSSチェックボックス画像の置換

テーブルにチェックボックスのリストがあります。 （行の多数のCBの1つ）

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

チェックボックス画像をカスタムのオン/オフ画像のペアで置き換えたいのですが、CSSでこれを行う方法について誰かがもっと理解しているかどうか疑問に思っていましたか？

私はこの「CSS忍者」チュートリアルを見つけましたが、私にとってそれが少し複雑であることを認めなければなりません。 http://www.thecssninja.com/css/custom-inputs-using-css

私が知る限り、擬似クラスの使用が許可されています

 td:not(#foo) > input[type=checkbox] + label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

私の期待は、上記のCSSを追加することで、チェックボックスは少なくともデフォルトでOFF状態の画像を表示することであり、その後、ONを取得するために以下を追加します

 td:not(#foo) > input[type=checkbox]:checked + label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

残念ながら、どこかの重要なステップを見逃しているようです。私は現在の設定に合わせてカスタムCSS3セレクター構文を使用しようとしましたが、何かが欠落している必要があります（それが重要な場合、画像のサイズは16x16です）

http://www.w3.org/TR/css3-selectors/#checked

編集：チュートリアルでは、入力そのものではなく、ラベルに画像の変更を適用するものが欠けていました。私はまだページ上のチェックボックスの結果に期待されるスワップ画像を取得していませんが、私は近いと思います。

csscss3checkboxcss-selectors
76
Alex C

あなたはもう近くにいます。チェックボックスを非表示にして、input[checkbox] + labelでスタイルを設定したラベルに関連付けてください。

完全なコード： http://Gist.github.com/592332

JSFiddle： http://jsfiddle.net/4huzr/

121
arbales

CSS3を選択した場合、javascriptを使用する必要はないようです。

:beforeセレクターを使用すると、CSSの2行でこれを実行できます。 （スクリプトは含まれません）。

このアプローチのもう1つの利点は、<label>タグに依存せず、欠落していても機能することです。

注：CSS3サポートのないブラウザーでは、チェックボックスは通常のように見えます。 （下位互換性）。

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }​

ここでデモを見ることができます： http://jsfiddle.net/hqZt6/1/

そして、これには画像があります：

http://jsfiddle.net/hqZt6/6/

36
Mo Valipour

さらにカスタマイズをお探しの場合は、

次のライブラリを確認してください。 https://lokesh-coder.github.io/pretty-checkbox/

ありがとう

3
Vylson silwr