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 */
}
Commentaires
Ajouter un commentaire
Les champs marqués d'un * sont obligatoires.
Pas encore de commentaire, soyez le premier !