Question

I need to convert the default checkbox to this

enter image description here

It s ok to use anything, A background image, CSS3, jQuery.

Answer 1

如果您不反对使用现有的工具包,。彩票牌Button可把检查箱变成习惯式的、支持四个基本视线州(再加一个 h子州):

“jQuery

但是,为了能够利用这一特征,你想(使用<条码>> 值/代码>称号为标签),你必须把<条码>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);
});

From there on, it s as simple as calling button() on the check box or buttonset() on a container. Of course, if none of the default jQuery UI themes are appropriate for your project, you can design your own style for each visual state with ThemeRoller.

You can find a live demo in this fiddle.

Answer 2

You can use pure css. Just add a label after your checkbox:

#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()。

友情链接