Tutorial CSS : Checkboxes & Boutons radio
En a déjà vu comment créer un effet glace sur une image en utilisant un Js. Cette fois ci nous allons voir comment personnaliser les Checkboxes et les boutons radio des formulaires. Au fait je vais mettre une série de tutoriaux dont le sujet principal est la personnalisation des formulaires .
Cette personnalisation se base sur la bibliothèque mootools et un fichier CSS.
Images Utilisées :
 |
 |
 |
 |
|
| chk_off.png | chk_on.png | rdo_off.png | rdo_on.png |
Evidemment vous pouvez créer d’autres graphiques s’intégrant à votre design.
Premier partie :
Téléchargez et placez les fichiers screensmall.css ; mootools.js ; moocheck.js dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </head> :
<script src="mootools.js" type="text/javascript"></script> <script src="moocheck.js" type="text/javascript"></script> <link href="screensmall.css" rel="stylesheet" type="text/css" media="screen" />
Faites attention au paramètre “src” qui indique l’emplacement du script.
Deuxième partie :
Ajoutez la class à la balise qui va servir de conteneur (div) pour afficher l’effet
<div class="section demo"> <form onsubmit="void(0)"> <span class="leftcol"> <h3>Bouton Checkboxes</h3> <label> <input type="checkbox" />Checkbox valeur (1)</label> <label> <input checked="checked" type="checkbox" />Checkbox valeur (2)</label> <label> <input type="checkbox" />Checkbox valeur (3)</label> </span> <span class="rightcol"> <h3>Bouton Radio</h3> <label> <input name="leftcol" type="radio" />Radio valeur (1)</label> <label> <input checked="checked" name="leftcol" type="radio" />Radio valeur (3)</label> <label> <input name="leftcol" type="radio" />Radio valeur (2)</label> </span> </form> </div>
Le résultat final :
Pour le moment il ne fonction pas sur IE 5.5, Essayez le et donnez moi des nouvelles, au prochain tutorial.
16 commentaires, commentaire ou Trackback
eMeRiKa
Sympa mais j’ai peur que l’internaute lambda soit dérouté et ne comprennes plus qu’il s’agit d’élément de formulaire!!!
2 septembre 2007
MedBlog
Pas vraiment, si c’est un design qui est en même temps agréable et compréhensif.
Tu peux simplement changé les checkboxes et leurs donné le style des formulaires Mac :); ça t’évitera le risque que se soit difficile à assimiler, et franchement c’est plus agréable que les ckeckboxes de Windows.
2 septembre 2007
Stuntman mike
C’est franchement un très bonne source, mais quelqu’un pourrait-il expliquer pourquoi elle fonctionne nickel en local et non sur serveur ? (j’ai évidemment fait tous les tests, les fichiers java y sont etc… il s’agit vraiment du même dossier…).
Merci pour la réponse.
13 septembre 2007
Stuntman mike
Après quelques test il semble déjà que le script ne soit pas compatible avec ie7.
Autre souci curieux : le problème de fichier en local provient de moocheck.js, pour le faire fonctionner il faut soit l’inclure dans la page ou faire un lien à partir de la source mère… (oui, je sais, ça parait complètement illogique…).
13 septembre 2007
MedBlog
Oui effectivement le script ne fonction pas sur le navigateur de Microsoft que ce soit IE6 ou IE7 dommage ;)
14 septembre 2007
maxime
Cette exemple marche très bien avec IE7, il suffit d’autoriser le contenu bloquer….
Sinon pour ma part, le script ne marche pas, firefox me dit que window.addEvent() n’est pas une fonction. Je suis entrain de voir ou ait le problème.
26 septembre 2007
KeuXeu
Pompé sur http://www.chriserwin.com/scripts/crir/
16 janvier 2008
dedzep
pompé ? et alors ?
cette version est traduite convenablement, et ce site plein de ressources mérite des encouragements.
quand au pompage, effectivement mettre sous le titre ou en bas d’article d’où vient la “source” (si celle ci n’est pas elle même pompée d’un autre site, également pompé d’un autre site, également pompé de…)
etc ;)
22 octobre 2008
bormat
le lien a était coupé http://bormat2.free.fr/personnalisation_formulaire/personnaliser-checkbox-et-radio
2 août 2009
services internet marketing
Merci de l’astuce, changer les boutons radio n’est pas vraiment une tâche facile, on dirait que changer le radio button pour une image est la seule solution!
13 décembre 2010
TRISTAN
le .zip est mort :(
23 décembre 2010
Inc.
Serait-il possible de mettre les liens à jour ?
Je vous remercie. :)
19 février 2011
Greg
Serait-il possible de remettre le lien ?
Merci
29 mars 2011
mulldrifter
En fait, pour les radio je trouve ca vraiment bien (le choix de couleur aide carément)
pour les checkboxes, je pense qu’un border serait parfait pour ce design
chapeau ^^
1 août 2011
Diane
Merci beaucoup.
Je cherchais comment faire!!
12 décembre 2011
jean
KeuXeu, peut-êre pompé mais très utile tout de même, or moi c’est ici que j’ai trouvé l’information, merci.
2 février 2012
Répondre á “Tutorial CSS : Checkboxes & Boutons radio”