Étoiles de notation en CSS (note avec fractions)
Saisissez la note et ajustez l’apparence. La note est dans une variable CSS : changez le nombre et les étoiles suivent.
Mode d’emploiNote de 4,7 avec l’étoile presque pleine
Disponible en: 
Étoiles de notation en CSS (note avec fractions): à quoi ça sert
Des étoiles seulement pleines ou vides ne montrent pas la différence entre 4,1 et 4,9. Ce générateur crée des étoiles en CSS pur qui remplissent la fraction exacte de la note, avec un dégradé découpé dans le texte et la note dans une variable CSS.
Réglez le nombre d’étoiles, la taille, les couleurs, le nombre à côté et le total d’avis. Il existe aussi la version cliquable, faite de boutons radio masqués, qui fonctionne à la souris, au toucher et au clavier et envoie la note dans un formulaire sans JavaScript. Les deux versions ont un texte pour les lecteurs d’écran.
Mode d’emploi
- Saisissez la note et le nombre d’étoiles.
- Ajustez la taille et les couleurs.
- Copiez le code.
Quand l’utiliser
- Note moyenne de produits.
- Formulaire d’évaluation.
- Résumé d’avis sur des landing pages.
Questions fréquentes
Comment l’étoile affiche-t-elle une fraction ?
Les étoiles sont du texte (★) peint avec un dégradé qui a un arrêt net : la couleur pleine jusqu’au pourcentage de la note et la couleur vide ensuite. Avec une note de 4,3 sur 5, le dégradé peint 86 % de la largeur, et la cinquième étoile n’a qu’un morceau coloré.
Est-ce accessible ?
Oui. L’élément a role=img et un aria-label comme « Note de 4,3 sur 5 », ce que les lecteurs d’écran annoncent à la place des symboles.
Comment fonctionne la version cliquable ?
Elle utilise des boutons radio masqués, un pour chaque étoile : elle fonctionne donc à la souris, au toucher et au clavier (flèches) et envoie la note avec le formulaire, sans JavaScript.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.