Rating Stars
Note de 1 à 5 étoiles qui se choisit à la souris, au doigt ou aux flèches du clavier : vrai groupe radio, remplissage doré au survol, cascade à la validation.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque étoile est un <label> qui contient un bouton radio masqué ; les cinq sont réunis dans un <fieldset>. Choisir une étoile, c'est cocher le bouton correspondant : au clic, au toucher, ou au clavier avec Tab puis les flèches. Dans un <form>, la note part avec le formulaire sous le nom note (valeur 1 à 5), et un bouton « Effacer » du formulaire vide aussi les étoiles.
Chaque étoile est un ★ gris, recouvert d'une copie dorée (#fbbf24) découpée par clip-path: inset(). Au survol de la souris, les étoiles se remplissent jusqu'à celle qui est pointée ; en quittant, elles reviennent à la note choisie. Au choix, les étoiles remplies grossissent l'une après l'autre (rtsPop, 0,3 s, 50 ms d'écart) et le texte devient le mot de data-rts-word suivi de la note : « Très bien (4/5) ».
Les étoiles vides sont en #70708c, à 3,6:1 sur le fond #1a1a2e. Une note déjà cochée dans le HTML est affichée au chargement. Chaque .fx-0741-root est un groupe à part : hors formulaire, si deux groupes portent le même name, le script en renomme un pour qu'ils ne se mélangent pas. Écoutez l'événement natif change sur la racine pour envoyer la note.
Accessibilité
- Vrai groupe radio : le lecteur d'écran annonce « Votre note, groupe » puis « 3 étoiles sur 5, bouton radio, 3 sur 5 ». La légende et les noms sont du texte masqué à l'écran, à traduire dans le HTML.
- Clavier : Tab entre dans le groupe, les flèches changent la note, Tab en sort ; anneau lavande autour de l'étoile qui a le focus. Sur Safari pour Mac, Tab n'entre dans le groupe qu'avec l'option clavier du système (sinon Option + Tab).
- Note annoncée : le texte « Très bien (4/5) » est dans une zone
aria-live="polite", lue après chaque choix. - Contraste : étoile vide à 3,6:1 sur le fond par défaut, étoile pleine à 10:1. Sur fond blanc, prenez un or plus soutenu (
--rts-fill: #d97706) et un gris plus foncé : l'or#fbbf24ne fait que 1,7:1 sur blanc. - Mouvement réduit : pas de cascade ni de grossissement au survol ; les étoiles se remplissent sur place.
Compatibilité navigateur
Formulaire HTML natif, CSS et 2,9 Ko de JavaScript commentés, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : code collé deux fois (chaque groupe garde sa note), clic, toucher à 390 px, flèches du clavier, mouvement réduit, formulaire envoyé puis effacé, 0 erreur, aucun nom ajouté sur window.
Sans JavaScript, les boutons radio marchent et la note part avec le formulaire, mais les étoiles ne se colorent pas. La propriété inset qui pose le bouton sur l'étoile date de Chrome 87, Firefox 66 et Safari 14.1 ; l'anneau de focus de :focus-visible (Chrome 86, Firefox 85, Safari 15.4). Le survol utilise les Pointer Events (Chrome 55, Firefox 59, Safari 13).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0741-root">
<div class="rts-demo">
<fieldset class="rts-stars">
<legend class="rts-vh">Votre note</legend>
<label class="rts-star"><input type="radio" name="note" value="1" data-rts-word="Mauvais"><span class="rts-glyph" aria-hidden="true">★</span><span class="rts-vh">1 étoile sur 5</span></label>
<label class="rts-star"><input type="radio" name="note" value="2" data-rts-word="Passable"><span class="rts-glyph" aria-hidden="true">★</span><span class="rts-vh">2 étoiles sur 5</span></label>
<label class="rts-star"><input type="radio" name="note" value="3" data-rts-word="Bien"><span class="rts-glyph" aria-hidden="true">★</span><span class="rts-vh">3 étoiles sur 5</span></label>
<label class="rts-star"><input type="radio" name="note" value="4" data-rts-word="Très bien"><span class="rts-glyph" aria-hidden="true">★</span><span class="rts-vh">4 étoiles sur 5</span></label>
<label class="rts-star"><input type="radio" name="note" value="5" data-rts-word="Excellent"><span class="rts-glyph" aria-hidden="true">★</span><span class="rts-vh">5 étoiles sur 5</span></label>
</fieldset>
<span class="rts-text" aria-live="polite">Cliquez pour noter</span>
</div>
</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 |
|---|---|---|
Mots de la note (HTML — data-rts-word sur chaque bouton radio) |
Mauvais · Passable · Bien · Très bien · Excellent | Mot affiché et annoncé avant « (n/5) ». |
Nom du groupe (HTML — name des boutons radio) |
note |
Nom envoyé avec le formulaire ; donnez un nom différent à chaque groupe d'une même page. |
Note de départ (HTML — checked sur un bouton radio) |
aucune | Affiche une note déjà donnée, par exemple relue depuis votre base. |
Taille et écart (CSS — --rts-size, --rts-gap) |
2.5rem · 8 px | Étoiles géantes pour une borne, petites pour une liste. |
Couleurs (CSS — --rts-fill, --rts-empty) |
#fbbf24 · #70708c |
Gardez au moins 3:1 entre l'étoile vide et votre fond. |
Texte (CSS — --rts-text-color, --rts-text-size, --rts-text-gap) |
blanc à 60 % · .9rem · 15 px | À foncer sur fond clair. |
Cadre (CSS — --rts-height, --rts-page, --rts-panel, --rts-pad) |
300 px · #0a0a0f · #1a1a2e · 20 px |
0 et transparent pour l'intégrer à votre carte. |
FAQ
note=4). En JavaScript : root.addEventListener('change', e => envoyer(e.target.value)), ou lisez root.querySelector('input:checked').value.type="reset" : les étoiles et le texte reviennent au départ.
