样式复选框&单选按钮

Styling checkboxes & radio buttons

本文关键字：单选按钮 复选框 样式      更新时间：2023-09-26

我想为未选中的复选框使用一个图像，为已选中的复选框使用另一个图像。我不想添加标签，类之类的东西。我想单独离开HTML，让它只是显示<input type="checkbox" />我不介意使用JavaScript或jQuery，只要我能离开HTML。这是我正在寻找的一个例子，但它只适用于Webkit浏览器。http://jsfiddle.net/7kScn/如果不添加标签、类或id，会有解决方案吗?

使用Jquery UI可能会有帮助

例如

复选框。

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

收音机。http://jqueryui.com/button/无线电

gl高频

这看起来是一个有趣的选择，尽管它似乎只是在测试版:

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

有趣的周五挑战，这是我的一些hack实现。请记住，对于真正的应用，你必须包含更好的输入类型目标和更健壮的选择器:

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");
        }
    }
});

不幸的是，我一定不是很清楚，是的，有非常灵活和美好的事情，你可以用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/虽然颜色和字体很难看，但它完成了我想要的，而且这些都很容易更改。

相关文章：