Basic CSS only percentage based star rating System.
Demo: https://jsfiddle.net/NullDev/nju10Loz/2/
License: https://gist.github.com/NullDev/f65b57677505e72986536652aa5dbc9c
Last active
March 27, 2023 12:55
-
-
Save NullDev/464b08135138f1c1a135053a898b1a79 to your computer and use it in GitHub Desktop.
CSS Star rating System - Percentage Based, CSS Only Star rating System
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rating { | |
| unicode-bidi: bidi-override; | |
| color: #c5c5c5; | |
| font-size: 25px; | |
| height: 25px; | |
| width: 100px; | |
| margin: 0 auto; | |
| position: relative; | |
| padding: 0; | |
| text-shadow: 0px 1px 0 #a2a2a2; | |
| } | |
| .rating-upper { | |
| color: #e7711b; | |
| padding: 0; | |
| position: absolute; | |
| z-index: 1; | |
| display: flex; | |
| top: 0; | |
| left: 0; | |
| overflow: hidden; | |
| } | |
| .rating-lower { | |
| padding: 0; | |
| display: flex; | |
| z-index: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="rating"> | |
| <div class="rating-upper" style="width: 0%"> | |
| <span>★</span> | |
| <span>★</span> | |
| <span>★</span> | |
| <span>★</span> | |
| <span>★</span> | |
| </div> | |
| <div class="rating-lower"> | |
| <span>★</span> | |
| <span>★</span> | |
| <span>★</span> | |
| <span>★</span> | |
| <span>★</span> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ah right, thanks for pointing that out @obliviga !
I corrected the link :)