Star Rating Animated
Une vraie note de 1 à 5 étoiles : clic, toucher ou flèches du clavier, les étoiles s'allument jusqu'au choix avec un petit rebond, et la note part avec le formulaire.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque étoile est un vrai bouton radio : <label class="strt-star"> contient un <input type="radio" name="note" value="1…5"> rendu invisible mais posé sur l'étoile, le caractère ★ (.strt-glyph) et un texte pour les lecteurs d'écran (« 4 étoiles sur 5 »). L'ensemble est un <fieldset> nommé par sa <legend> « Votre note ». Le clic, le toucher, Tab puis les flèches : tout ce que fait un groupe radio du navigateur marche ici sans script, y compris l'envoi de note=4 avec le formulaire qui l'entoure.
Le script allume les étoiles jusqu'à la note cochée (classe is-on : jaune #fbbf24, agrandies de 20 %) et les fait rebondir (@keyframes strt-pop, 0,3 s) à chaque nouveau choix, ainsi qu'une fois quand la note de départ apparaît à l'écran. Au survol, le CSS montre un aperçu jusqu'à l'étoile pointée, sans rien cocher. Un reset du formulaire remet les étoiles à la note du HTML.
Plusieurs notes dans la même page : si deux groupes ont le même name (même formulaire, ou tous deux hors formulaire), le script renomme le second (note-2, note-3…) et rend à chacun la note cochée dans son HTML. Rien n'est déclaré sur window. Pour lire la note : l'événement change remonte jusqu'à la racine, et racine.querySelector('.strt-input:checked').value donne la valeur.
Accessibilité
- Groupe de boutons radio natif : le lecteur d'écran annonce « Votre note, groupe », puis « 4 étoiles sur 5, bouton radio, coché, 4 sur 5 ». Les étoiles dessinées sont masquées (
aria-hidden). - Clavier : Tab entre dans le groupe sur l'étoile cochée, les flèches changent la note, Tab en sort. Le focus se voit : contour de 2 px autour de l'étoile (
:focus-visible, couleur--strt-focus). - Toucher : toute la surface de l'étoile reçoit le doigt, puisque le bouton radio la couvre entièrement.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, ni rebond ni transition ; les étoiles s'allument directement. - Limite : pas de demi-étoile ; pour une note à 0,5 près, il faudrait dix boutons radio.
Compatibilité navigateur
Boutons radio natifs, CSS et JavaScript sans dépendance (environ 3 Ko). Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : clic et toucher sur la 2e copie sans toucher la 1re, Tab puis flèche gauche (4 → 3), contour de focus, valeur envoyée par un formulaire (note=4), noms des quatre copies note, note-2, note-3, note-4, 390 px, mouvement réduit, aucune erreur. Versions tirées de @mdn/browser-compat-data : :focus-visible fixe le minimum pour le contour.
Plus ancien (à partir de Chrome 51, Firefox 55, Safari 12.1) : tout marche sauf le contour de focus. Sans JavaScript, la note reste un groupe radio utilisable et envoyé avec le formulaire, mais les étoiles ne s'allument qu'au survol.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0239-root">
<fieldset class="strt-rating">
<legend class="strt-legend">Votre note</legend>
<div class="strt-stars">
<label class="strt-star">
<input class="strt-input" type="radio" name="note" value="1">
<span class="strt-glyph" aria-hidden="true">★</span>
<span class="strt-sr">1 étoile sur 5</span>
</label>
… (4 autres étiquettes, value 2 à 5 ; checked sur la note de départ)
</div>
</fieldset>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Note de départ (HTML — checked sur un .strt-input) |
4 | Retirez checked partout pour une note vierge, ou placez-le sur une autre étoile. |
Nom envoyé (HTML — name des boutons radio) |
note | Nom du champ dans le formulaire. Gardez le même name sur les cinq boutons d'une même note. |
Légende et textes lus (HTML — .strt-legend et .strt-sr) |
« Votre note » · « 1 étoile sur 5 »… | Ce qu'entend un lecteur d'écran. La légende est masquée par défaut : retirez .strt-legend de la règle qui masque pour l'afficher. |
Couleurs (CSS — --strt-on, --strt-off, --strt-focus) |
#fbbf24 · blanc à 20 % · #6366f1 | Étoiles allumées, éteintes, contour de focus. Sur fond clair, une couleur éteinte comme #e5e7eb. |
Taille (CSS — --strt-size) |
2rem | Taille du caractère ★ ; 1rem dans une liste, 3 à 4rem sur une borne. |
| Nombre d'étoiles (HTML) | 5 | Ajoutez une étiquette avec value="6" pour une note sur 6, et adaptez les textes « sur 5 ». |
Fond et hauteur (CSS — --strt-bg, --strt-height) |
#0a0a0f · 300px | Dans un formulaire : --strt-bg:transparent; --strt-height:0px. |
FAQ
change sur la racine : racine.addEventListener('change', () => console.log(racine.querySelector('.strt-input:checked').value)). Dans un formulaire, la note part toute seule avec les autres champs.disabled sur le <fieldset> (plus de clic ni de clavier) et .strt-stars{pointer-events:none} pour couper l'aperçu au survol ; un lecteur d'écran annoncera des boutons désactivés.name dans un même formulaire (ou tous deux hors formulaire) n'en forment qu'un pour le navigateur : cocher l'un décocherait l'autre. Le script renomme donc la seconde note (note-2). Donnez des noms différents dans votre HTML pour garder la main sur les noms envoyés.
