Author: | Mahima-Gupta1315 |
---|---|
Views Total: | 1,252 views |
Official Page: | Go to website |
Last Update: | November 25, 2021 |
License: | MIT |
Preview:

Description:
An animated rating bar with support for half star rating, built using radio buttons and CSS/CSS3.
How to use it:
1. The rating uses Font Awesome for star symbols.
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />
2. Add radio buttons to the rating container. For example, you can create 10 radio buttons for a 5-star rating system.
<div class="rating"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> <input type="radio" name="html"> </div>
3. The CSS to transform the radio buttons into rating stars.
.rating{ position: relative; display: flex; margin: 10px 0; flex-direction: row-reverse ; } .rating input{ position: relative; width: 20px; height: 40px; display: flex; justify-content: center; align-items: center; -webkit-appearance: none; appearance: none; overflow: hidden; } .rating input::before{ content: '\f005'; position: absolute; font-family: fontAwesome; font-size: 34px; position: absolute; left: 4px; color: #030b0f; transition: 0.5s; } .rating input:nth-child(2n + 1)::before{ right: 4px; left: initial; } .rating input:hover ~ input::before, .rating input:hover::before, .rating input:checked ~ input::before, .rating input:checked::before{ color: #1f9cff; }