将图像添加到 html 类型的输入复选框或单选框

我正在尝试为 html 输入类型复选框和收音机指定要用于我的未选中和选中值的图像。

我有这个：

 background: url("image.png") no-repeat;

但它似乎不适用于单选按钮和仅复选框按钮。

有谁知道有用的东西吗？

原文由 f1wade 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 309

我找到并找到了答案。在这些论坛的帮助下 http://forums.digitalpoint.com/showthread.php?t=665980

所有代码都在下面：您可以复制到一个文件并添加您自己的图像，它会起作用。

 <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>

原文由 f1wade 发布，翻译遵循 CC BY-SA 2.5 许可协议

将图像添加到 html 类型的输入复选框或单选框

你尚未登录，登录后可以

element-plus的el-input如何去除聚焦时候的蓝色边框？

问一个鼠标滚动事件，这种是怎么实现的？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

单页应用网站缓存不是由于index.html文件被缓存导致的吗？

Stack Overflow 翻译