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.