Pure css star rating bar

06.09.11

Σε πολλές ιστοσελίδες είναι απαραίτητο ένα σύστημα που να επιτρέπει στους χρήστες να βαθμολογήσουν ένα άρθρο, πρόγραμμα, ταινία κλπ

Σχεδιάζοντας ένα site που χρειαζόταν ένα τέτοιο σύστημα σκέφτηκα πως θα μπορούσε να γίνει μόνο με css. Μια αναζήτηση στο google αποκάλυψε διάφορες λύσεις που περιλάμβαναν δεκάδες γραμμές κώδικα και πολλαπλά επικαλυπτόμενα div's με σχετική ή απόλυτη τοποθέτηση. Σκέφτηκα πως θα πρέπει να υπάρχει πιο εύκολος τρόπος.

Ο κώδικας είναι μερικές μόνο γραμμές:

<style type="text/css">
.stars{
width: 120px;
height: 17px;
}
.stars .star{
width: 17px;
height: 17px;
padding: 1px;
display: inline-block;
background: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/fullstar.png') center center no-repeat;
}
.stars:hover .star{
background-image: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/fullstar.png') !important;
}
.last ~ .star{
background-image: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/emptystar.png');
}
.star:hover ~ .star{
background-image: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/emptystar.png') !important;
}
</style>

<div class="stars">
<div class="star"></div><div class="star"></div><div class="last star"></div><div class="star"></div><div class="star"></div>
</div>

In english

Searching for a pure css star rating bar I found only some solutions that involve dozens of css lines and many overlapping relatively and absolutely positioned elements, so I decided to make my own, simpler solution, which you can see above.

Browser compatibility: IE7+ and all other modern browsers.