将图像添加到 html 类型输入复选框或单选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5117116/
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
add an image to a html type input check box or radio
提问by f1wade
I'm trying to specify an image to be used for my unchecked and checked values for html input type checkbox and radio.
我正在尝试指定一个图像，用于 html 输入类型复选框和收音机的未选中和选中的值。
I have got this:
我有这个：
background: url("image.png") no-repeat;
but it doesnt seem to work on radio and checkbox only button.
但它似乎不适用于收音机和复选框按钮。
Does anyone know something that will work?
有谁知道会起作用的东西吗？
采纳答案by Elwhis
Take a look at this Ryan Fait - Custom checkboxes and radio buttons... Hope it's what you're looking for ;)
看看这个Ryan Fait - 自定义复选框和单选按钮......希望它是你正在寻找的 ;)
回答by f1wade
I have found and worked an answer. with help from these forums http://forums.digitalpoint.com/showthread.php?t=665980
我已经找到并找到了答案。在这些论坛的帮助下 http://forums.digitalpoint.com/showthread.php?t=665980
all code is below: you can copy to a single file and add your own images and it will work.
所有代码如下：您可以复制到单个文件并添加自己的图像，它会起作用。
<html>
<script type="text/javascript">
//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = '52 0 ROff.png';
var imgTrue = '52 0 ROn.png';
//replace the checkbox with an image and setup events to handle it
function replaceChecks() {
//get all the input fields on the page
inputs = document.getElementsByTagName('input');
//cycle trough the input fields
for(var i=0; i<inputs.length; i++) {
//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'checkbox') {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkClick('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);
//hide the checkbox
inputs[i].style.display='none';
}
}
}
//change the checkbox status and the replacement image
function checkClick(i) {
if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
</script>
</html>
<body>
<input type="checkbox" />
<script type="text/javascript">replaceChecks();</script>
</body>
回答by Nidhi
In checkbox if you want to change images or/and color then the optimized way is http://jsfiddle.net/nsoni/4cHSB/5/here you can click either on "item name" or on "checkbox" and get the effect.
在复选框中，如果您想更改图像或/和颜色，那么优化的方式是http://jsfiddle.net/nsoni/4cHSB/5/在这里您可以单击“项目名称”或“复选框”并获得效果.
HTML:
HTML：
<div class="had">
<div class="ch">
<input type="checkbox" id="sho1" name="chk1">
<div class="so"></div>
<label for="sho1">Select one</label>
</div>
<div class="ch">
<input type="checkbox" id="sho2" name="chk2">
<div class="so"></div>
<label for="sho2">Select two</label>
</div>
</div>
CSS:
CSS：
input {
display: none;
}
input [type=checkbox]:checked+.so{
background-image:url('http://goo.gl/3tza1X');
background-repeat:no-repeat;background-color:green;
border-radius:50%;background-position: -2px -1px;
}
input [type=checkbox]:checked+.so+label{
color: red;
}
.so {
margin: 2px; float: left;height: 30px;width: 30px;
border: 3px solid #D8D8D8;background-color: #4679BD;
border-radius: 5px;
}
.show {
margin-left: 30px;
}
.had {
margin: 50px auto;width: 50%;border: 1px solid black;
height: 30px;padding:10px;
}
.ch {
float: left;margin-left:20px;width:40%
}
label {
height: 30px;width: 100%;position:relative;
display:block;margin-top: 5px;
}
回答by linkyndy
You cannot style checkboxes and radio buttons by pure CSS. You will need to get a JavaScript plugin (there are plenty of jQuery plugins out there) which will do this for you. Basically, it overlays another element over the default one by keeping the default element's behaviour.
您不能通过纯 CSS 设置复选框和单选按钮的样式。你需要一个 JavaScript 插件（有很多 jQuery 插件），它会为你做这件事。基本上，它通过保留默认元素的行为将另一个元素覆盖在默认元素上。
回答by user2314737
Here is how I did it. I'm using radio input. The input boxes are hidden and the image in each label changes when the input is selected/not selected.
这是我如何做到的。我正在使用无线电输入。当输入被选择/未选择时，输入框被隐藏并且每个标签中的图像会发生变化。
Jsfiddle: http://jsfiddle.net/EhDsf/
jsfiddle：http: //jsfiddle.net/EhDsf/
HTML:
HTML：
<div class="options">
<label title="item1">
<input type="radio" name="foo" value="0" />
Item 1
<img />
</label>
<label title="item2">
<input type="radio" name="foo" value="1" />
Item 2
<img />
</label>
<label title="item3">
<input type="radio" name="foo" value="2" />
Item 3
<img />
</label>
</div>
CSS:
CSS：
div.options > label > input {
visibility: hidden;
}
div.options > label {
display: block;
margin: 0 0 0 -10px;
padding: 0 0 48px 0;
height: 20px;
width: 150px;
}
div.options > label > img {
display: inline-block;
padding: 0px;
height:60px;
width:60px;
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/thumbs-down-128.png);
background-repeat: no-repeat;
background-position:center center;
background-size:60px 60px;
}
div.options > label > input:checked +img {
background: url(https://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
background-repeat: no-repeat;
background-position:center center;
background-size:60px 60px;
}
