How to use images for check boxes using CSS or may be JavaScript?

Question

It is obviously very simple question but I have never done such thing before. My designer want some thing like this for check boxes (it is on left side. Checked ones are grey and other white).

KooiInc · Accepted Answer · 2012-02-29 10:09:42Z

2

One idea is to use a span with background-image (empty box), hide a related checkbox, and assign a clickhandler to the the span (onclick: change checked attribute of the related hidden checkbox, change background image of the span accordingly).

Here is an example of that

edited Feb 29, 2012 at 10:09

answered Feb 29, 2012 at 9:42

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Undefined · Accepted Answer · 2012-02-29 09:38:22Z

1

For this sort of thing i use jQuery UI. An example is here : http://jqueryui.com/demos/button/#checkbox

and some example code:

<script>
$(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
});
</script>

answered Feb 29, 2012 at 9:38

Undefined

11.4k5 gold badges40 silver badges62 bronze badges

2 Comments

Imran Subhani Over a year ago

I am not using "jQuery UI" in my site, for this small piece of visual effect do you think I should include jQuery UI Core and UI Widget to my javascripts?

Undefined Over a year ago

I Would yes, jQuery UI also takes care of any cross browser problems with the checkboxes :)

Collectives™ on Stack Overflow

How to use images for check boxes using CSS or may be JavaScript?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related