Skip to content

Instantly share code, notes, and snippets.

@DamienLucchese

DamienLucchese/customCHECKBOX.html

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DamienLucchese/068a26914d395baef056 to your computer and use it in GitHub Desktop.
Save DamienLucchese/068a26914d395baef056 to your computer and use it in GitHub Desktop.
Download ZIP
Hi, here's a way you can make custom checkboxes with a little HTML, CSS, and jQuery. You can make your own img file, host it, change the link in the css and make it your own. Also, if you're just getting into web development, this is a great way to get familiar with how HTML, CSS, & Javascript interact and help each other. I hope you find this h…
Raw
customCHECKBOX.html
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- THIS IS THE CHECKBOX HTML -->
<!-- PLEASE NOTE: THE LABEL "for=''" SHOULD MATCH THE INPUT "id=''"
IF MULTIPLE CHECKBOXES, THEY NEED TO BE UNIQUE -->
<div class="checkbox text-center">
<input type="checkbox" class="checkbox_1" id="checkbox_1" name="checkbox_1" checked="checked" />
<label class="cus_checkbox cus_checkbox_on" for="checkbox_1"></label>
</div>
<!-- /THIS IS THE CHECKBOX HTML -->
</body>
</html>
Raw
customCHECKBOXscript.js
// THIS IS A BIT OF SCRIPT THAT TOGGLES THE CLASS OF THE CLICKED SPACE. THE CLASSES DETERMINE IF THE GRAPHIC SHOWN.
// SAME IMG FILE REFERENCED IN BOTH CASES BUT THE POSITIONING OF THE BACKGROUND IMG DISPLAYS "ON" OR "OFF."
<script type="text/javascript">
$(document).ready(function(){
$('.cus_checkbox').click(function() {
$(this).toggleClass('cus_checkbox_on');
$(this).toggleClass('cus_checkbox_off');
});
});
</script>
Raw
customCHECKBOXstyle.css
.checkbox .checkbox_1 {
display: none;
}
.cus_checkbox {
background: url("https://lh3.googleusercontent.com/mD4Lnhah3Tlz9sPo8GLNgzhnj31swPdIuglabOYULiM=w39-h80-no") no-repeat;
display: inline-block;
padding-left: 2px;
position: relative;
width: 40px;
height: 40px;
}
.cus_checkbox_on {
background-position: 0px -40px;
}
.cus_checkbox_off {
background-position: 0px 6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment