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

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

  15. Hi mates, its great paragraph on the topic of cultureand fully defined, keep it up
    all the time.

Recevez les derniers articles par mail :

 

Recent Comments

  • Carmine
    Un nouveau logo pour Photoshop
    2021-03-16 20:40:09
  • Kidjo tv
    Scriblink - Le tableau blanc collaboratif en ligne !?
    2021-03-14 10:33:20
  • resilier abonnementorange
    ViewAt.org, Partage de photo panoramique
    2021-03-14 10:30:40
  • Boulanger.Com
    FaceInHole, Changer de corps
    2021-03-14 10:30:29
  • kidjo tv logicom
    SnagIt lance des plugins de capture d’écran
    2021-03-14 10:30:07
  • tv apk
    ImprimeBlog, Imprimer son blog en un livre
    2021-03-14 10:28:51
  • KIDJO TV
    Pulse ARTS : Le magazine des arts graphiques devient à 100% gratuit
    2021-03-14 10:26:30
  • Mamanmi.com
    Read It Later, Enregistrer est remettre la lecture de vos articles à plus tard
    2021-03-14 10:17:21
  • resiliation abonnement
    Vidéo sur les coulisses d’un studio photo
    2021-03-14 10:10:45
  • kidjo tv tiniloo
    Seam Carving les plugins sont disponible maintenant
    2021-03-14 10:10:17
  • supprimer orange
    Google Shared Stuff : bookmarking vu par Google
    2021-03-14 10:09:23
  • kidjo tv logicom
    Iconlet : Moteur de recherche d'icones
    2021-03-14 10:03:25
  • abonement
    Blackle, la version écolo de Google
    2021-03-14 10:03:14
  • abonnementjeu
    Verify Email, contrôle vos adresse e-mail
    2021-03-14 10:01:56
  • tv Abonnement
    SnagIt lance des plugins de capture d’écran
    2021-03-14 10:01:32

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