如何自定义复选框，添加背景图像

Question

我需要将默认复选框转换为此

可以使用任何东西，背景图片，CSS3，jQuery。

http://jsfiddle.net/jitendravyas/uGYv6/

Answer 1

如果您不反对使用现有工具包，jQuery UI Button可以将复选框转换为支持四种基本视觉状态的自定义样式按钮（再加上一种悬停状态）：

但是，为了能够以您希望的方式使用该功能（使用value属性作为标签），您必须为复选框添加id属性，并添加{ {1}}引用这些ID的元素，并将其复选框的值作为其内部文本公开。您可以手动更改标记：

<label>

或动态修改：

<input type="checkbox" id="nutri" name="nutri" value="select">
<label for="nutri">select</label>

从那里开始，就像在复选框上调用$("input:checkbox").each(function(index) { $("<label>").text(this.value) .attr("for", this.id = "checkbox" + index + 1) .insertAfter(this); }); 或在容器上调用button()一样简单。当然，如果没有任何默认的jQuery UI主题适合您的项目，您可以使用ThemeRoller为每个可视状态设计自己的样式。

您可以在this fiddle找到现场演示。

Answer 2

您可以使用纯CSS。只需在复选框后添加标签：

#check_box {

    display:none;

}

#check_box + label{

    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}


#check_box:checked + label{

    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;

}

Answer 3

$('#yourCheckbox').hide().after($('<img/>', { src: 'blah.png', alt: 'whatever' }).click(function(){
    $(this).prev('input:checkbox').click();
}));

您可能还可以创建包含图像的标签。然后你可以摆脱click()处理程序。