Html 是否可以将图像放入输入类型 =“复选框”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4790281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is it possible put image in input type="check box"?
提问by sandeep
i want to put an image on the background of check box & radio box in my html code but it's not work but it's work on other form property.
我想在我的 html 代码中的复选框和单选框的背景上放置一个图像，但它不起作用，但它适用于其他表单属性。
回答by sandeep
I found the way how give image to checkbox& radiobutton with pure css.
我找到了如何使用纯 css为复选框和单选按钮提供图像的方法。
HTML
HTML
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>
CSS
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;
}
Check this for more http://css-tricks.com/the-checkbox-hack/,
检查更多http://css-tricks.com/the-checkbox-hack/，
回答by Anirudha Gupta
I write my own code to fix this issue. This will work like this. I didn't have this code now but I write same way here on SO.
我编写自己的代码来解决这个问题。这将像这样工作。我现在没有这个代码，但我在这里写同样的方式。
<div class="checkbox-wrapper">
<input type="checkbox" name="value"/>
<img src="img/blah.png"/>
</div>
In css we will hide this checkbox by make it's Z-index less then the image that I put inside this wrapper code. Eventwise when someone click on image it's look like checkbox and in real checkbox will be clicked. instead of display:noneusing opacity:0 will be better. This will break in IE6 but we didn't care about that because I am not supporting IE6 anymore.
在 css 中，我们将隐藏此复选框，使其 Z-index 小于我放置在此包装器代码中的图像。Eventwise 当有人单击图像时，它看起来像复选框，而实际上复选框将被单击。而不是display:none使用opacity:0 会更好。这将在 IE6 中中断，但我们并不关心它，因为我不再支持 IE6。
In Javascript You can write event if you want a different (but similar to mine) implementation. You can replace native Html Checkbox,Radio and select (select2 is better if you stick with Twitter bootstrap) with your own themes based controls.
在 Javascript 中如果你想要一个不同的（但类似于我的）实现，你可以编写事件。您可以使用您自己的基于主题的控件替换本机 Html Checkbox、Radio 和 select（如果您坚持使用 Twitter 引导程序，则选择 2 更好）。
回答by Fibericon
Place the checkbox in a div, and place a background image in said div. Here's an example:
将复选框放在 div 中，并在该 div 中放置背景图像。下面是一个例子：
<div id="backgrounddiv" style="background-image: url('image.gif');">
<input id="check_box" type="checkbox" />
</div>
