Skip to content

Instantly share code, notes, and snippets.

@ignovak

ignovak/rate.html

Created December 17, 2014 12:47
Show Gist options
  • Save ignovak/9029b892aea0bc914be3 to your computer and use it in GitHub Desktop.
Save ignovak/9029b892aea0bc914be3 to your computer and use it in GitHub Desktop.
Download ZIP
jsless implementation of rate stars
Raw
rate.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Rate</title>
<style>
.stars {
position: relative;
display: inline-block;
}
input
{
display: none;
}
label
{
padding: 3px 15px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.stars input:invalid + label,
input:checked ~ input + label
{
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpolygon%20fill%3D%22%23aaa%22%20points%3D%2262.7%2C1.5%2081.6%2C39.8%20123.9%2C45.9%2093.3%2C75.8%20100.5%2C117.9%2062.7%2C98%2024.9%2C117.9%2032.1%2C75.8%201.5%2C45.9%2043.8%2C39.8%22%2F%3E%3C%2Fsvg%3E) no-repeat;
}
label,
.stars input:hover + label
{
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2262.7%2C1.5%2081.6%2C39.8%20123.9%2C45.9%2093.3%2C75.8%20100.5%2C117.9%2062.7%2C98%2024.9%2C117.9%2032.1%2C75.8%201.5%2C45.9%2043.8%2C39.8%22%2F%3E%3C%2Fsvg%3E) no-repeat;
}
input + label::after {
content: 'Rate: 'attr(for);
position: absolute;
right: 0;
margin: 8px;
display: none;
cursor: default;
}
input:checked + label::after {
display: block;
}
</style>
</head>
<body>
<div class='stars'>
<input type='radio' name='rate' id='1' required><label for='1'></label>
<input type='radio' name='rate' id='2'><label for='2'></label>
<input type='radio' name='rate' id='3'><label for='3'></label>
<input type='radio' name='rate' id='4'><label for='4'></label>
<input type='radio' name='rate' id='5'><label for='5'></label>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment