Author: | jakealbaugh |
---|---|
Views Total: | 11,317 views |
Official Page: | Go to website |
Last Update: | March 1, 2016 |
License: | MIT |
Preview:

Description:
A plain HTML/CSS based rating system that uses SVG stars for rating symbols. Comes with a smooth select / deselect effect based on CSS3 transitions.
How to use it:
Create radio buttons for the 5 star rating system.
<input type="radio" name="stars" id="star-null"> <input type="radio" name="stars" id="star-1"> <input type="radio" name="stars" id="star-2"> <input type="radio" name="stars" id="star-3" checked> <input type="radio" name="stars" id="star-4"> <input type="radio" name="stars" id="star-5">
Wrap the SVG stars into label elements as follow:
<label for="star-1"> <svg width="255" height="240" viewBox="0 0 51 48"> <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/> </svg> </label> <label for="star-2"> <svg width="255" height="240" viewBox="0 0 51 48"> <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/> </svg> </label> <label for="star-3"> <svg width="255" height="240" viewBox="0 0 51 48"> <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/> </svg> </label> <label for="star-4"> <svg width="255" height="240" viewBox="0 0 51 48"> <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/> </svg> </label> <label for="star-5"> <svg width="255" height="240" viewBox="0 0 51 48"> <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/> </svg> </label> <label for="star-null"> Clear </label>
Style the rating system with the following CSS snippets.
#star-1:checked ~ section [for='star-1'] svg, #star-2:checked ~ section [for='star-1'] svg, #star-2:checked ~ section [for='star-2'] svg, #star-3:checked ~ section [for='star-1'] svg, #star-3:checked ~ section [for='star-2'] svg, #star-3:checked ~ section [for='star-3'] svg, #star-4:checked ~ section [for='star-1'] svg, #star-4:checked ~ section [for='star-2'] svg, #star-4:checked ~ section [for='star-3'] svg, #star-4:checked ~ section [for='star-4'] svg, #star-5:checked ~ section [for='star-1'] svg, #star-5:checked ~ section [for='star-2'] svg, #star-5:checked ~ section [for='star-3'] svg, #star-5:checked ~ section [for='star-4'] svg, #star-5:checked ~ section [for='star-5'] svg { -webkit-transform: scale(1); transform: scale(1); } #star-1:checked ~ section [for='star-1'] svg path, #star-2:checked ~ section [for='star-1'] svg path, #star-2:checked ~ section [for='star-2'] svg path, #star-3:checked ~ section [for='star-1'] svg path, #star-3:checked ~ section [for='star-2'] svg path, #star-3:checked ~ section [for='star-3'] svg path, #star-4:checked ~ section [for='star-1'] svg path, #star-4:checked ~ section [for='star-2'] svg path, #star-4:checked ~ section [for='star-3'] svg path, #star-4:checked ~ section [for='star-4'] svg path, #star-5:checked ~ section [for='star-1'] svg path, #star-5:checked ~ section [for='star-2'] svg path, #star-5:checked ~ section [for='star-3'] svg path, #star-5:checked ~ section [for='star-4'] svg path, #star-5:checked ~ section [for='star-5'] svg path { fill: #FFBB00; stroke: #cc9600; } section { width: 300px; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } label { display: inline-block; width: 50px; text-align: center; cursor: pointer; } label svg { width: 100%; height: auto; fill: white; stroke: #CCC; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition: -webkit-transform 200ms ease-in-out; transition: -webkit-transform 200ms ease-in-out; transition: transform 200ms ease-in-out; transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; } label svg path { -webkit-transition: fill 200ms ease-in-out, stroke 100ms ease-in-out; transition: fill 200ms ease-in-out, stroke 100ms ease-in-out; } label[for="star-null"] { display: block; margin: 0 auto; color: #999; }