Skip to content

Instantly share code, notes, and snippets.

@gohilumesh

gohilumesh/index.html

Last active February 15, 2017 03:12
Show Gist options
  • Save gohilumesh/64b589366607e99b8d96e6867d42698c to your computer and use it in GitHub Desktop.
Save gohilumesh/64b589366607e99b8d96e6867d42698c to your computer and use it in GitHub Desktop.
Download ZIP
Star Widget
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="stars">
<input class="star" id="star-5" type="radio" name="star"/>
<label class="star" for="star-5"></label>
<input class="star" id="star-4" type="radio" name="star"/>
<label class="star" for="star-4"></label>
<input class="star" id="star-3" type="radio" name="star"/>
<label class="star" for="star-3"></label>
<input class="star" id="star-2" type="radio" name="star"/>
<label class="star" for="star-2"></label>
<input class="star" id="star-1" type="radio" name="star"/>
<label class="star" for="star-1"></label>
</div>
</body>
</html>
Raw
style.css
div.stars {
width: 270px;
display: inline-block;
}
input.star {
display: none;
}
label.star {
float: right;
padding: 10px;
color: #999;
font-size: 36px;
font-family: FontAwesome;
}
label.star:before {
content: '\f006'; /* empty star */
}
input.star:checked ~ label.star:before {
content: '\f005'; /* full star */
color: yellow;
}
/* extra functionality */
label.star:hover { transform: rotate(-15deg) scale(1.3); }
/* target the last element, -- 5 star selected then add text-shadow to all star*/
input.star:nth-of-type(1):checked ~ label.star:before {
text-shadow: 0 0 20px #952;
}
/* target the first element -- only one star selected make it red*/
input.star:nth-of-type(5):checked ~ label.star:before { color: red; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment