Télécharger
Noter:

Ajouté le 2021-03-19
Visionné 445 fois
3/5 (5)

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 */
}

Besoin de travaux pour votre site ?

Je suis là pour vous aider !

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