Mootools : Put your own style on input type checkbox

2013-05-31
Kevin Lancien

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

Download demo/source files

Download
Charles - 2013-08-08 00:27:23
this post is fantastic
Julian - 2013-08-08 00:27:23
Excellent work, Nice Design
Emily - 2013-08-10 03:31:15
Very Good Site
Michelle - 2013-08-10 03:31:15
Cool site goodluck :)

Comment

USER EXPERIENCE

Wandi invites you to discover a new approach to navigating a website...
Are you ready?

Launch the experience