Exemple pris sur le site : http://www.cssplay.co.uk/menu/cssplay-tutorial-form.html

Améliorer un formulaire

But : améliorer l'affichage des cases à cocher et des boutons radio.

Principe : afficher un bouton OUI et NON avec un cache qui cachera le OUI quand le choix est dé-sélectionné et cachera le NON quand le choix est sélectionné.

Astuce : créer un cache mobile qui cachera soit le OUI soit le NON. Il faut que les 2 éléments, le cache et le bouton, soient parfaitement positionnés donc il faut utiliser un positionnement absolu ; mais ce doit fonctionner pour chaque choix donc il faut un positionnement absolu avec chaque choix ! Les choix doivent donc être eux aussi positionnés avec un positionnement relatif par rapport à la marge de gauche.

Réalisation

1. Au départ, une case à cocher normale :

   div id="deux"input type="checkbox" id="deux_bis" name="deux_bis"label for="deux_bis" Vous êtes sur ?/label/div

   Vous êtes sur ?

2. On positionne le label à 120 px de la gauche :

   #deux {position:relative; }

   #deux label {margin-left:120px;}

   Vous êtes sur ?

3. On affiche le bouton OUI / NON devant grâce à BEFORE

   #deux {position:relative; }

   #deux label {margin-left:120px;}

   #deux label:before {content:"Oui Non"; width:100px; height:40px; position:absolute; left:0; top:0; }

   Vous êtes sur ?

4. On affiche le cache en utilisant le pseudo élément AFTER + transition lors du passage du cache entre OUI et NON

   #deux label:after {content:""; width:51px; height:40px; position:absolute; left:54px; top:5px; transition:0.5s;}

   Vous êtes sur ?

5. Et pour finir, on définit la seconde position du cache : LEFT=5px cache le OUI, LEFT=54px cache le NON

   #deux #deux_bis:checked ~ label:after {left:54px;}

   Vous êtes sur ?

Même principe pour des boutons radio

Capitale de la France ?

Idem pour les pense-bête