MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

Tutorial CSS : Checkboxes & Boutons radio

Tutorial CSS : Checkbox & Des boutons radio design
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.

AddThis Social Bookmark Button

16 commentaires, commentaire ou Trackback

  1. 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. 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.

  3. 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.

  4. 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…).

  5. Oui effectivement le script ne fonction pas sur le navigateur de Microsoft que ce soit IE6 ou IE7 dommage ;)

  6. 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.

  7. 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 ;)

  8. 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!

  9. le .zip est mort :(

  10. Inc.

    Serait-il possible de mettre les liens à jour ?

    Je vous remercie. :)

  11. Greg

    Serait-il possible de remettre le lien ?

    Merci

  12. 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 ^^

  13. Merci beaucoup.

    Je cherchais comment faire!!

  14. KeuXeu, peut-êre pompé mais très utile tout de même, or moi c’est ici que j’ai trouvé l’information, merci.

Répondre á “Tutorial CSS : Checkboxes & Boutons radio”

Recevez les derniers articles par mail :

 

Recent Comments

  • filz 4mm kaufen
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-09-18 14:52:13
  • source
    Fontpark, Faites de l’art avec l’alphabet japonais
    2018-09-17 11:51:06
  • compraventa relojes de lujo
    Apple prépare une version 10.4.11 de Mac OS X
    2018-09-09 03:25:34
  • Katherin
    Verify Email, contrôle vos adresse e-mail
    2018-09-01 05:34:08
  • ikan hias
    Hotspot Shield, Accédez à Pandora & Hulu hors des USA
    2018-08-31 18:05:00
  • vender relojes
    Picoshot, générer des Thumbnails de sites
    2018-08-29 09:30:16
  • propecia
    Fontpark, Faites de l’art avec l’alphabet japonais
    2018-08-26 00:29:02
  • pocket knives best
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-08-25 12:50:54
  • tooth implant Dubai
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-08-17 10:49:11
  • Hors
    Tutorial ReflectOMatic, ajouter facilement des effets de réflections
    2018-08-13 15:54:15
  • List Of Dentists In Dubai
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-08-08 03:04:52
  • Compra Venta Relojes
    OpenSocial : une plateforme de développement Google pour les réseaux sociaux
    2018-08-07 01:22:23
  • Mercedes car maintenance
    Publicité Toyota YARIS
    2018-07-30 16:22:08
  • Cable Type 2 Type 2
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-07-25 11:30:09
  • part worn tyres Brentwood
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-07-24 11:16:15

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris