Question

我想将图像用于未选中的复选框，将另一个图像用于选中的复选框。我不想添加标签，类或类似的东西。我想单独留下HTML，让它只显示<input type="checkbox" />我不介意使用JavaScript或jQuery，只要我可以单独留下HTML。这是我正在寻找的一个例子，但它只适用于Webkit浏览器。 http://jsfiddle.net/7kScn/ 如果没有添加标签，类或ID，是否会有解决方案？

Answer 1

可能有助于使用Jquery UI

复选框例如。 http://jqueryui.com/button/#checkbox

收音机，例如。 http://jqueryui.com/button/#radio

gl hf

Answer 2

这看起来像一个有趣的选项，虽然它似乎只是在beta：

http://widowmaker.kiev.ua/checkbox/

Answer 3

有趣的星期五挑战，这是我的有点hacky实现。请记住，对于真正的应用，您必须包含更好的输入类型定位和更强大的选择器：

的jsfiddle： http://jsfiddle.net/2RNVh/

$("input").each(function() {
    var $this = $(this);
    $this.hide();

    var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);    

    $image.bind("click", function() {
        var $checkbox = $(this).prev("input");
        $checkbox.prop("checked", !$checkbox.prop("checked"));    
        checkImage();
    })

    function checkImage() {
        if($image.prev("input").prop("checked")) {
            $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png");
        } else {
            $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png");
        }
    }

});

Answer 4

不幸的是，我一定不清楚，是的，你可以用jQuery，CSS（X）HTML和其他任何东西做非常灵活和好的事情......但实质上，他们转换input进入div。选择下降也很难找到好的东西。我最终在选择框中找到了这个，我将尝试看看是否可以为复选框和单选按钮执行类似操作。 http://bavotasan.com/2011/style-select-box-using-only-css/

我发现了一些完美的东西。 http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/ 虽然颜色和字体非常难看，但它完成了我需要的东西，而且很容易改变。

样式复选框＆amp;单选按钮

4 个答案: