You probably already know that basic html input element of type checkbox is not directly stylisable CSS.
In order to give the style that you want a checkbox input, it must pass through the javascript.
Using much the MooTools JavaScript framework in Wandi, we coded some JS classes that allow us to quickly stylized these inputs, while keeping the normal behavior of the latter.
Here is one of these classes (depending on the inclusion of MooTools in your page)
var CustomCheckbox = new Class({ ||t||initialize: function(selectorClass){ ||t||||t||if (selectorClass == "") ||t||||t||||t||return false; ||t||||t||this.selectorClass = selectorClass; ||t||||t||this.checkboxes = $$('.'+this.selectorClass+' input[type="checkbox"]'); ||t||||t||if (this.checkboxes.length > 0) ||t||||t||||t||this.initEvents(); ||t||}, ||t||initEvents: function(){ ||t||||t||this.checkboxes.each(function(checkbox){ ||t||||t||||t||var container = checkbox.getParent('.'+this.selectorClass); ||t||||t||||t||var label = $$('label[for="'+checkbox.get('id')+'"]')[0]; ||t||||t||||t||container.addEvent('click', function(e){ ||t||||t||||t||||t||e.stop(); ||t||||t||||t||||t||this.select(container); ||t||||t||||t||}.bind(this)); ||t||||t||||t||if (label){ ||t||||t||||t||||t||label.addEvent('click', function(e){ ||t||||t||||t||||t||||t||if (e.target.tagName != "A"){ ||t||||t||||t||||t||||t||||t||e.stop(); ||t||||t||||t||||t||||t||||t||this.select(container); ||t||||t||||t||||t||||t||} ||t||||t||||t||||t||}.bind(this)); ||t||||t||||t||} ||t||||t||}.bind(this)); ||t||||t||this.update(); ||t||}, ||t||select: function(container){ ||t||||t||var checkbox = container.getElement('input[type="checkbox"]'); ||t||||t||if (checkbox.checked){ ||t||||t||||t||container.removeClass('checked'); ||t||||t||||t||checkbox.checked = false; ||t||||t||} else { ||t||||t||||t||container.addClass('checked'); ||t||||t||||t||checkbox.checked = true; ||t||||t||} ||t||||t||this.update(); ||t||||t||checkbox.fireEvent('change'); ||t||}, ||t||update: function(){ ||t||||t||this.checkboxes.each(function(checkbox){ ||t||||t||||t||var container = checkbox.getParent('.checkbox'); ||t||||t||||t||if (checkbox.checked && !container.hasClass('checked')) ||t||||t||||t||||t||container.addClass('checked'); ||t||||t||||t||else if (!checkbox.checked && container.hasClass('checked')) ||t||||t||||t||||t||container.removeClass('checked'); ||t||||t||}.bind(this)); ||t||} }); window.addEvent('domready', function(){ ||t||new CustomCheckbox("checkbox"); });
.checkbox { ||t||cursor:pointer; ||t||width:10px; ||t||height:10px; ||t||background-color:#fff; ||t||border:1px solid #DDDDDD; ||t||border-radius:2px; ||t||float:left; ||t||margin-right:10px; ||t||position:relative; ||t||top:4px; } .checkbox.checked { ||t||background-color:#EEEEEE; } .checkbox input[type="checkbox"]{ ||t||display:none; }
Comment