Cases à cocher professionnelles sans framework

checkbox personnalisation button css apparence

Avec une feuille de style CSS et une fonction JavaScript, vos formulaires changent de look.

Il existe de nombreux tutoriels montrant comment améliorer l'apparence des cases à cocher, fonctionnant avec jQuery ou Mootool ou autre framework Ajax. Mais ces frameworks sont-ils vraiment nécessaires dans ce cas précis?

En fait on peut le réaliser uniquement avec du code CSS et JavaScript, en utilisant l'élément de formulaire standard <button> plutôt que <checkbox>. Ainsi qu'une image pour changer l'apparence de la case.

Démonstration

Formulaire

Etes vous un désigner?

Pour insérer une case à cocher dans la page, le code sera le suivant:

<button type="button" class="prettycb" value="0" onclick="setcbimg(this)"></button>

Noter bien que:

1) On utilise l'objet <button> et non pas <input> car la valeur de ce dernier est affichée et ce n'est pas ce que l'on veut ici. Dans le cas de l'objet button, c'est le contenu entre la balise d'ouverture et de fermeture qui s'affiche.

2) On précise le type "button", c'est indispensable si l'on veut que l'attribut value soit géré par les navigateurs (selon nos tests).

Le code CSS

.prettycb
{
  background:url('uncheck.png');
  background-repeat:no-repeat;
  width:16px;
  height:16px;
  padding:0;
  box-shadow:1px 2x 3px #AAA; 
  -webkit-box-shadow:1px 2px 3px #AAA;	
  border:none;
}

La case est initialisée comme non cochée par l'image uncheck.png. C'est le défaut du code simplifié tel qu'il est. On peut le supprimer avec un code JavaScript qui initialise les cases au chargement de la page en changeant l'image en fonction de la valeur 0 ou 1 de l'attribut value.

La fonction JavaScript

function setcbimg(element)
{
  var v = 1 - element.value;
  var z = new Image(); 
  if(v)
    z.src = "check.png"
  else	
    z.src = "uncheck.png"
  element.style.backgroundImage="url(" + z.src + ")";	
  element.value=v;
}

Cette fonction est appelée quand on clique sur la case, pour la cocher ou la décocher.

La valeur contenue dans l'attribut value est inversée et en fonction de la nouvelle valeur, on affiche l'image de la case cochée ou non.

Ce principe nous permet d'utiliser l'objet de formulaire pour stocker l'état on/off, et évite de gérer des variables pour ce faire. C'est plus facile à déployer...

Personnaliser les cases à cocher

Pour les modifier, il suffit de changer les deux images.

Et pour gérer les problèmes de l'alignement de la case avec le libellé à gauche, on ajoutera éventuellement une marge en haut de l'image avec un fond transparent un ou on utilisera un code CSS pour aligner le libellé.

On peut utiliser ce code tel qu'il est si les cases sont toutes décochées au départ, sinon il faut, soit ajouter un code CSS pour les cases précochées, soit créer une fonction JavaScript pour initialiser les cases selon leur état.

S'affranchir de JavaScript?

Pour s'affranchir de JavaScript, il faut utiliser des sélecteurs d'attributs [type=checkbox] et une pseudo classe :checked ou un second sélecteur d'attribut, [checked].
Seulement ce n'est pas supporté par tous les navigateurs.

Téléchargement

Référence