Chargement…
Créer Des Boutons Radio en CSS3

Créer Des Boutons Radio en CSS3



Les boutons radio sont utilisés dans des formulaires où l’utilisateur peux sélectionner une option ou une catégorie. Les radios sont normalement sous forme de cercles, mais dans ce tutoriel je vais vous montrez comment créer des boutons radio en css 3 et jQuery. Ses boutons auront deux fonctions, dés que l’utilisateur sélectionne une catégorie, son nom s’affiche en haut de formulaire.

Créer Des Boutons Radio en CSS

Démonstration

Création des boutons radio en css

En premier lieu, il faut télécharger la librairie jQuery, une feuille de style CSS et notre code Javascript qu’on va intégrer directement dans notre page web :

Puis entre la class body et /body, on ajoute ce code :

Cette Span id= »radiovaleurtexte » est celle chargée de style d’affichage lors de la sélection d’un bouton, sa valeur change chaque fois qu’une catégorie est sélectionnée. Vous allez trouver aussi cette DIV id= »radiobsd » qui contient plusieurs champs (Row) avec différents éléments (Nom des catégories et leurs Liens respectives). Pour cela on attribut une ID pour chaque entrée de donnée (Input) :

Son entrée de donnée :

Notre Feuille de Style

Comme vous pouvez voir dans la feuille de style (style.css), on cache les entrées de données par display: none. Dans notre exemple on a centré le contenu, mais vous pouvez le changer par rapport à la structure de votre formulaire.

Notre script

event.preventDefault() est utilisé pour empêcher la page de s’actualisée une fois un bouton est cliqué (sélectionné).
catid est la string de jQuery chargée de la sélection.

Télécharger Code Source

Avec les nouveaux variables de CSS3 et jQuery, on peux créer des interfaces et des boutons facilement, plus besoin d’images..etc, j’espère que ce tutoriel vous aideras à créer des boutons radios plus stylés ;) et si vous avez des questions n’hésitez pas d’utiliser le formulaire de commentaires.

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire