Rating
Fully featured Rating component using CSS only, no JS at all
Example
Code
<div class="cssonly-rating"> <input type="radio" name="rating" value="5" id="rating-5" /> <label for="rating-5"></label> <input type="radio" name="rating" value="4" id="rating-4" /> <label for="rating-4"></label> <input type="radio" name="rating" value="3" id="rating-3" /> <label for="rating-3"></label> <input type="radio" name="rating" value="2" id="rating-2" /> <label for="rating-2"></label> <input type="radio" name="rating" value="1" id="rating-1" /> <label for="rating-1"></label></div>Options
CSS Variables
--icon-size: <px> // default value: 36px--filled-icon: <char> // default value: "★"--non-filled-icon: <char> // default value: "☆"--filled-color: <color> // default value: #ffb400--non-filled-color: <color> // default value: #bdbdbdHTML Attributes options
A default initial value can be set by adding
checked attribute to one of the radio inputs.