web-dev-qa-db-ja.com

input type = "checkbox"に画像を配置することは可能ですか？

hTMLコードのチェックボックスとラジオボックスの背景に画像を配置したいのですが、機能しませんが、他のフォームプロパティでは機能します。

htmlcsscheckbox
13
sandeep

チェックボックス＆ラジオボタンに画像を与える方法を見つけました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

18
sandeep

この問題を修正するために独自のコードを作成します。これはこのように機能します。私は今このコードを持っていませんでしたが、ここでも同じ方法でSOを記述しています。

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

CSSでは、このラッパーコード内に配置した画像よりもZインデックスを少なくすることで、このチェックボックスを非表示にします。最終的に誰かが画像をクリックすると、チェックボックスのように見え、実際にはチェックボックスがクリックされます。の代わりに display:none using opacity:0の方が良いでしょう。これはIE6で機能しなくなりますが、IE6をサポートしなくなったため、気にしませんでした。

Javascriptで別の（しかし私のものに似た）実装が必要な場合は、イベントを作成できます。ネイティブのHtmlチェックボックス、ラジオを置き換えて、独自のテーマベースのコントロールで選択できます（Twitterブートストラップを使用する場合はselect2の方が適しています）。

3
Anirudha Gupta

チェックボックスをdivに配置し、背景画像をdivに配置します。次に例を示します。

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