Customized Html Controls: Creating Custom Checkbox

Under “Customized Html Controls” section I will discuss about how to create and customized standard html controls. This is first article in this category. This will discuss about how we can create a custom checkbox using CSS and jQuery.

Checkbox Image

For this you need two images, one for checked state of checkbox and another for unchecked state of the checkbox. However, you can also use a single image containing both checked and unchecked state and use CSS trick like I use.

Checkbox CSS

Here is the CSS classes we will be going to use for the checkbox

.checkBox
{
    background-position: 0px 0px;
}

.checkBoxClear
{
    background-position: -21px 0px;
}

.checkBox, .checkBoxClear
{
    background-image: url('CheckBox.png');
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 21px;
    height: 21px;
    padding: 0px;
    margin: 0px;
    cursor: hand;
}

Checkbox JavaScript

Finally below is the JavaScript code using jQuery which will control the checking and un-checking of our checkbox using click event. It will basically toggle the CSS which will change the state.

<script language="javascript" type="text/javascript">
<!--
$(document).ready(function()
{
    $(".checkBox,.checkBoxClear").click(function(srcc)
    {
        if ($(this).hasClass("checkBox"))
        {
            $(this).removeClass("checkBox");
            $(this).addClass("checkBoxClear");
        }
        else
        {
            $(this).removeClass("checkBoxClear");
            $(this).addClass("checkBox");
        }
    });        
});
//-->
</script>

Html Code

Here is a sample Custom Checkbox with the html code.

Select options

 

 
 
 

<h3>Select options</h3>
<div id="Div1" class="checkBox">&nbsp;</div>
<label for="Div1">
    Lorem ipsum dolor sit amet</label><br />
<div id="Div2" class="checkBox">
    &nbsp;</div>
<label for="Div2">
    Aenean vitae elit quis erat interdum tempus</label>
<div id="Div3" class="checkBox">
    &nbsp;</div>
<label for="Div3">
    Duis laoreet viverra quam</label>
<div id="Div4" class="checkBox">
    &nbsp;</div>
<label for="Div4">
    Mauris pellentesque tristique erat</label>

19 comment(S)


Adrian Callaghan on Feb 16, 2009 03:54 AM

Thanks for a nice tutorial

sivagurunathans on Apr 28, 2009 08:50 PM

Nice Trick

fdfd on Apr 30, 2009 11:28 PM


kcvg on May 1, 2009 09:00 PM

Checkbox CSS:
I think “cursor: hand” Replaced “cursor:pointer; ” Will be better!
???

karen on Jun 21, 2009 12:34 AM

thanks, but id doesn't work properly. what do I do?

jkk on Aug 13, 2009 05:47 AM

How to make it default unchecked?

zengzhan on Nov 11, 2009 06:00 PM

If use input = "checkbox" is better,I continue to look forward to

Web Design Mauritius on Feb 15, 2011 12:46 AM

Nice trick and very good tutorial.

Leo on Mar 3, 2011 03:01 AM

I'd like to know if you can use these checkboxes in a form, how would you submit the values for each ticked checkbox?

sponsored

Vacheslav on Apr 17, 2011 11:22 PM

Leo, you cannot submit values using this approach. To submit values you need to replace standard checkboxes with these divs and reflect divs' values to standard checkboxes.

Vacheslav on Apr 17, 2011 11:24 PM

I mean you need to hide standard checkboxes :-)

Onkar on May 25, 2011 11:28 PM

Nice trick buddy

Nasir on Jun 17, 2011 11:09 AM

Just send your form through ajax and then to PHP, you can send the value of the checked box easily.

Marco Marcoaldi on Jun 23, 2011 08:31 AM

Nice hack, but i disagree this solution cause look like checkbox but isn't checkbox and not html compliant.

The best way to customize checkbox and make it compatible with ie6 :

http://www.dreamsnet....tml-ie6-compatibile/

Simple ZIP demo to download and videotutorial (in italian).

Best Regards.

Rashid on Jul 8, 2011 06:58 AM

script is not working

auk on Sep 26, 2011 06:19 AM

good

NetWaver on Jan 16, 2013 09:26 PM

There are now similar solutions (plugin ready) and one of it is ScrewDefaultButtons

Rk on Feb 11, 2014 11:37 AM

nice 1.

I have another beautiful example to customize html checkbox using css, please go through the below link http://www.etechpuls....checkbox-css-in.html

Thanks

Leave a comment