Télécharger
Noter:

Ajouté le 2021-12-03
Visionné 1998 fois
3/5 (21)

Notation sur 5 étoiles simple en HTML

Description

J'ai découvert une manière simple de faire un système d'évaluation en HTML, la technique consiste en entourer des balises <span> (ou autre, tant qu'elles sont en display:inline-block afin de s'afficher sur une ligne) les unes dans les autres, regardez plutôt:

Cliquez ici pour tester

<span class="C2etoiles"><div>1</div>

<span class="C2etoiles"><div>2</div>

<span class="C2etoiles"><div>3</div>

<span class="C2etoiles"><div>4</div>

<span class="C2etoiles"><div>5</div> <!-- les div ici permettent l'affichage de l'étoile via la propriété "content", avec le sélecteur ".C2etoiles div::after" -->

</span>
</span>
</span>
</span>
</span>

/* j'ai fait un CSS basique, le but étant de montrer la technique pour colorer le fond de l'étoile 1 si on est sur la 1ère étoile, les étoiles 1 et 2 si on est sur la 2ème étoile, etc */
.C2etoiles{
background: red;
display: inline-block;
cursor: pointer;
}
.C2etoiles:hover{
background: green;
}
.C2etoiles div{
display: inline-block;
padding: 5px;
}
.C2etoiles div::after{
content:"\002605"; /* une étoile en Unicode */
}



Faire un don
Besoin de travaux pour votre site ?

Je suis là pour vous !

Commentaires

Ajouter un commentaire

Commenter
Pseudo/Nom *
Email *
Message *
Captcha *
memo2
Commenter

Les champs marqués d'un * sont obligatoires.

Pas encore de commentaire, soyez le premier !

Retour à la liste des scripts