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

  • Giữa nam sinh 1997 và nữ sinh 1995 có nên làm ăn chung?
    Microsoft se lance dans VoIP avec Office Communication Server 2007
    2019-08-24 05:07:26
  • snygg märkes väska
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2019-08-23 23:38:20
  • Leon
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-23 04:42:48
  • 신한마이카중고차대출
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2019-08-22 16:29:16
  • jordan hybrids
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-16 04:33:44
  • tonneau covers essentially
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-14 10:01:23
  • internet business
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-13 22:37:04
  • soft tonneau cover
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-13 13:50:20
  • Alysa
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-13 06:39:28
  • internet home business
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-13 01:56:38
  • phone numbers
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-11 16:08:35
  • bộ cờ lê lục giác
    Microsoft se lance dans VoIP avec Office Communication Server 2007
    2019-08-10 07:49:59
  • ai software seo & sem backlinks
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2019-08-09 15:02:36
  • KOTIN Casimir
    Iconspedia, un annuaire d'icônes gratuites
    2019-08-08 13:10:42
  • excellent cheap
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2019-08-08 10:44:54

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