Fri Jul 08 2022
Star Rating
CSS1744 views
File Name: star-rating.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Rating</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #383838;
}
section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
direction: rtl;
}
input[type=radio] { display: none; }
label { margin: 0 2px; }
label svg {
width: 40px;
height: 40px;
}
label svg polygon {
fill: #686868;
transition: 0.2s all ease-in-out;
}
input:not(:checked) ~ label:hover svg polygon,
input:not(:checked) ~ label:hover ~ label svg polygon {
fill: #ffae00;
}
input:checked ~ label svg polygon {
fill: #ffae00
}
</style>
</head>
<body>
<section>
<input type="radio" name="rate" id="star-5" />
<label for="star-5">
<svg viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<polygon points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 "/>
</svg>
</label>
<input type="radio" name="rate" id="star-4" />
<label for="star-4">
<svg viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<polygon points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 "/>
</svg>
</label>
<input type="radio" name="rate" id="star-3" />
<label for="star-3">
<svg viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<polygon points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 "/>
</svg>
</label>
<input type="radio" name="rate" id="star-2" />
<label for="star-2">
<svg viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<polygon points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 "/>
</svg>
</label>
<input type="radio" name="rate" id="star-1" />
<label for="star-1">
<svg viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<polygon points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 "/>
</svg>
</label>
</section>
</body>
</html>Result Screenshot(s)
Author:Geekboots