I want to know how I can change the color of "box" in checkbox by clicking on that. I do not want to change the color of labels I just want to change the color of box by clicking of it.
<input type="checkbox" name="1" class="styled green"/> 1
<input type="checkbox" name="2" class="styled red" checked/> 2
<input type="checkbox" name="3" class="styled purple" /> 3
this should do the trick (need bit testing and finetuning though, especially at checkbox's state) ;
// elementbyid shorthand
var $ = function(id) {
return document.getElementById(id);
};
// this function handles background color
var markCheckbox = function(e) {
// find id + class name
var showId = e.target.id;
var color = e.className
// change color
$(id).style.backgroundColor = color;
};
// this gets invoked when page got loaded
window.addEventistener('load', function() {
var getElements = document.getElementsByTagName('input');
// loop through all input elements
for(var i = 0; i < getElements.length; i++) {
// control if it's a checkbox + bind click event.
if(getElements[i].type == 'checkbox') {
(getElements[i].id).addEventListener('click', markCheckbox);
}
}
}
2¢ of mine:
http://roxon.in/scripts/checkbox_radio_custom.html
Basically with a couple of lines of JS - jQuery, you can replace the checkboxes with a<span> element. (Or with two like I did in my example link if you want to go fancy.)
$(':checkbox').each(function(){
var $c = $(this);
$c.hide().after('<span/>');
$c.next('span').click(function(){
$c[0].checked^=1;
});
});
than all you need is to be creative using CSS and CSS3 animations.
Here's how to target your SPAN that jQuery appended after the hidden INPUT:
/* target the hidden checkbox's next SPAN element: */
input[type=checkbox] + span{
}
/* Custom checkbox HOVER: */
input[type=checkbox] + span:hover{
}
/* Custom checkbox CHECKED STATE */
input[type=checkbox]:checked + span{
}
Have fun.
