CODEWITHSUNDEEP
jqueryhtmlcss
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

How to customize the checkbox , add a background image

I need to convert the default checkbox to this

enter image description here

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

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

Upvotes: 2

Views: 13400

Answers (3)

ali mokrani
ali mokrani

Reputation: 1179

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;

}

Upvotes: 3

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262919

If you're not against using an existing toolkit, jQuery UI Button can turn check boxes into custom-styled buttons that support the four basic visual states (plus one more hover state):

jQuery UI buttons from check boxes

However, to be able to use that feature the way you want (using the value attribute as the label), you'll have to give id attributes to your check boxes, and add <label> elements that refer to these ids and expose their check box's value as their inner text. You can either change your markup by hand:

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

Or modify it dynamically:

$("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.

Upvotes: 3

ThiefMaster
ThiefMaster

Reputation: 318488

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

You could probably also create a label containing an image. Then you could get rid of the click() handler.

Upvotes: 1

Related Questions