入力タイプ= "チェックボックス"にイメージを置くことは可能ですか？

Question

私はHTMLコードのチェックボックス&ラジオボックスの背景にイメージを置いてみたいですが、それは動作しませんが、他のフォームプロパティで動作します。

Answer 1

私はチェックボックス純粋なCSSで & ラジオボタンにイメージを与えるどのような方法を発見しました。

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

CSS

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    background: #999; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

input[type=checkbox]:checked + label { 
    background: #0080FF; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

チェックhttp://css-tricks.com/the-checkbox-hack/以上のため、この、

https://gist.github.com/592332

Answer 2

divにチェックボックスを置き、そのdivに背景画像を配置します。ここでは例です：

<div id="backgrounddiv" style="background-image: url('image.gif');"> 
<input id="check_box" type="checkbox" /> 
</div> 

Answer 3

私はこの問題を解決するために私自身のコードを書いています。これはこのように動作します。私は今このコードを持っていませんでしたが、私はここに同じように書きます。

<div class="checkbox-wrapper"> 
<input type="checkbox" name="value"/> 
<img src="img/blah.png"/> 
</div> 

cssでは、このラッパーコードの中に入れた画像のZ-インデックスより小さくすることでこのチェックボックスを非表示にします。実際に誰かが画像をクリックすると、それはチェックボックスのように見え、実際のチェックボックスでクリックされます。 の代わりにopacity:を使用するとより良いでしょう。これはIE6で壊れてしまいますが、私はもうIE6をサポートしていないので気にしませんでした。

In Javascript異なる（ただし、鉱山に似た）実装を希望する場合は、イベントを記述できます。ネイティブのHTMLチェックボックス、ラジオを置き換えることができ、自分のテーマに基づいたコントロールで選択することができます（select2はTwitterのブートストラップを利用する方がよい）。