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");
});

Simply wrap our input in an HTML element and assign a class, such as "checkbox" as in the example above. Then, when instantiating the JS class, pass the selector to the constructor. (l. 63 - CustomChecbox.js)

 

Here is for example the CSS I've used to style my 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;
}