homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Custom check box
Gowri pandiyan

 6:29 am on Apr 14, 2014 (gmt 0)

Hi Gurus,

I would like to replace the default check box with tick images, below is the code I tried for the same.

But I'm getting check box along with the image I called. Kindly help me out on this.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type='text/css'>

#N2_1_3 {

background: url( http://www.example.com/geetanjali/MROC/JON/unchecked50.png ) no-repeat;

background: url( http://www.example.com/geetanjali/MROC/JON/checked50.png ) no-repeat;


<script type='text/javascript'>


<input tabindex="7" type="checkbox" name="N2_1_3" id="N2_1_3" value="1"/>


Gowri pandiyan

 3:37 am on Apr 15, 2014 (gmt 0)

Hi Gurus,

Please help me out on the above request.


 12:01 pm on Apr 16, 2014 (gmt 0)

Javascript isn't even required for this. You can use labels with checked and next-sibling CSS selectors.

So, your HTML will look like this:

<input type="checkbox" class="custom_checkbox">

And your CSS would look like this:

.custom_checkbox {
display: none;

.custom_checkbox + div {
height: 16px;
width: 16px;
display: inline-block;
background-image: url('/images/unchecked.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;

.custom_checkbox:checked + div {
background-image: url('/images/checked.png');


 1:21 pm on Apr 16, 2014 (gmt 0)

@Readie, how would you check/uncheck the checkbox if it has display:none?


 4:29 pm on Apr 16, 2014 (gmt 0)

Wrap a checkbox and anything else in a label. Click that "anything else" and it behaves the same as clicking on the checkbox.

Gowri pandiyan

 9:07 am on Apr 24, 2014 (gmt 0)

Thanks for your reply! :)

Gowri pandiyan

 9:07 am on Apr 24, 2014 (gmt 0)

Thanks for your reply! :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved