Vous savez probablement déjà que, de base, un élément html input de type checkbox n'est pas stylisable directement en CSS.

Afin de pouvoir donner le style que l'on souhaite à un input checkbox, il faut passer par du javascript. 

Utilisant beaucoup le framework JavaScript MooTools chez Wandi, nous avons codé certaines classes JS qui nous permettent de stylisé rapidemment ces inputs, tout en gardant le comportement normal de ceux-ci.

Voici une de ces classes: (dépendant de l'inclusion de MooTools dans votre 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");
});

Il suffit d'encapsuler notre input dans un élément HTML et de lui affecter une classe, telle que "checkbox" comme dans l'exemple ci-dessus. Ensuite, lors de l'instanciation de la classe JS, passez ce selector dans le constructeur. (l. 63 - CustomChecbox.js)

Voici ensuite à titre d'exemple le CSS que j'ai utiliser pour styliser ma 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;
}