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

Question

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

这是确定使用什么，背景图像，CSS3和jQuery。

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

Answer 1

如果你不反对使用现有的工具包，jQuery UI Button可以把复选框到支持的四个基本可视状态（加一种悬停状态）的自定义风格的按钮：

然而，为了能够以您想要的方式使用该功能（使用value属性作为标签），您必须将id属性赋予复选框，并添加<label>指向这些ID的元素并显示其复选框的值作为它们的内部文本。您可以手动更改您的标记：

<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()或buttonset()一样简单。当然，如果没有默认的jQuery UI主题适合您的项目，您可以使用ThemeRoller为每个视觉状态设计自己的风格。

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

Answer 2

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

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

Answer 3

您可以使用纯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; 

}