Author: | mfleming1989 |
---|---|
Views Total: | 12,648 views |
Official Page: | Go to website |
Last Update: | March 25, 2017 |
License: | MIT |
Preview:

Description:
A simple, plain, CSS only 5-star rating control built using radio buttons and Unicode character ‘Star’.
How to use it:
Load the core stylesheet 5star.css in the header of the html document.
<link rel="stylesheet" href="styles/5star.css">
Create 5 radio inputs for the rating control.
<ul class="rate-area"> <input type="radio" id="5-star" name="rating" value="5" /><label for="5-star" title="Amazing">5 stars</label> <input type="radio" id="4-star" name="rating" value="4" /><label for="4-star" title="Good">4 stars</label> <input type="radio" id="3-star" name="rating" value="3" /><label for="3-star" title="Average">3 stars</label> <input type="radio" id="2-star" name="rating" value="2" /><label for="2-star" title="Not Good">2 stars</label> <input type="radio" id="1-star" name="rating" value="1" /><label for="1-star" title="Bad">1 star</label> </ul>
That’s it. Override the default rating styles in the ‘5star.css’ to your taste.
.rate-area { float: left; border-style: none; } .rate-area:not(:checked) > input { position: absolute; top: -9999px; clip: rect(0,0,0,0); } .rate-area:not(:checked) > label { float: right; width: 1em; padding: 0 .1em; overflow: hidden; white-space: nowrap; cursor: pointer; font-size: 400%; line-height: 1.2; color: lightgrey; text-shadow: 1px 1px #bbb; } .rate-area:not(:checked) > label:before { content: '★ '; } .rate-area > input:checked ~ label { color: gold; text-shadow: 1px 1px #c60; font-size: 450% !important; } .rate-area:not(:checked) > label:hover, .rate-area:not(:checked) > label:hover ~ label { color: gold; } .rate-area > input:checked + label:hover, .rate-area > input:checked + label:hover ~ label, .rate-area > input:checked ~ label:hover, .rate-area > input:checked ~ label:hover ~ label, .rate-area > label:hover ~ input:checked ~ label { color: gold; text-shadow: 1px 1px goldenrod; } .rate-area > label:active { position: relative; top: 2px; left: 2px; }