<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - CSS Star Rating System with SVG <symbol> and <use></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Star Rating System</h1>
<h2>Using CSS Radio Inputs with SVG <code><symbol></code> and <code><use></code></h2>
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor" points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085"></polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
<!-- partial -->
</body>
</html>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #F4F2F3;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
}
h1 {
font-family: 'Fjalla One', sans-serif;
margin-bottom: 0.15rem;
}
h2 {
font-family: 'Cutive Mono', 'Courier New';
font-size: 1rem;
letter-spacing: 1px;
margin-bottom: 4rem;
}
label {
cursor: pointer;
}
svg {
width: 3rem;
height: 3rem;
padding: 0.15rem;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: transparent;
-webkit-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse;
-webkit-box-pack: center;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #d62a9d;
}
input[name="star"]:checked + label .star {
-webkit-animation: starred 0.5s;
animation: starred 0.5s;
}
input[name="star"]:checked + label {
-webkit-animation: scaleup 1s;
animation: scaleup 1s;
}
@-webkit-keyframes scaleup {
from {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scaleup {
from {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes starred {
from {
color: #600040;
}
to {
color: #d62a9d;
}
}
@keyframes starred {
from {
color: #600040;
}
to {
color: #d62a9d;
}
}