<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Star Rating</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Pure CSS Star Rating</h1> <div class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label for="star5"></label> <input type="radio" id="star4" name="rating" value="4" /><label for="star4"></label> <input type="radio" id="star3" name="rating" value="3" /><label for="star3"></label> <input type="radio" id="star2" name="rating" value="2" /><label for="star2"></label> <input type="radio" id="star1" name="rating" value="1" /><label for="star1"></label> </div> </body> </html>@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap'); body { background: #f1f1f1; } body h1 { font-family: 'Roboto Slab', serif; margin: 50px 20px 40px; font-size: 50px; letter-spacing: 0.5px; color: #999; text-align: center; } .rating { width: 208px; height: 40px; margin: 0 auto; padding: 40px 50px; border: 1px solid #ccc; background: #f9f9f9; } .rating label { float: right; position: relative; width: 40px; height: 40px; cursor: pointer; } .rating label:not(:first-of-type) { padding-right: 2px; } .rating label:before { content: "\2605"; font-size: 42px; color: #ccc; line-height: 1; } .rating input { display: none; } .rating input:checked ~ label:before, .rating:not(:checked) > label:hover:before, .rating:not(:checked) > label:hover ~ label:before { color: #f9df4a; }
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.