<h1>Ratings Widget</h1>
<form class="rating-widget">
<input type="checkbox" class="star-input" id="1"/>
<label class="star-input-label" for="1">1
<i class="fa fa-star"></i>
<i class="fa fa-star orange"></i>
</label>
<input type="checkbox" class="star-input" id="2"/>
<label class="star-input-label" for="2">2
<i class="fa fa-star"></i>
<i class="fa fa-star orange"></i>
</label>
<input type="checkbox" class="star-input" id="3"/>
<label class="star-input-label" for="3">3
<i class="fa fa-star"></i>
<i class="fa fa-star orange"></i>
</label>
<input type="checkbox" class="star-input" id="4"/>
<label class="star-input-label" for="4">4
<i class="fa fa-star"></i>
<i class="fa fa-star orange"></i>
</label>
<input type="checkbox" class="star-input" id="5"/>
<label class="star-input-label" for="5">5
<i class="fa fa-star"></i>
<i class="fa fa-star orange"></i>
</label>
</form>
* {
transition:.25s ease-in-out;
box-sizing:border-box;
}
h1 {
text-align:center;
padding:100px 0 50px 0;
font-family:helvetica neue,helvetica,arial,sans-serif;
font-weight:100;
font-size:50px;
line-height:50px;
}
.rating-widget {
max-width:500px;
text-align:center;
margin:0px auto;
.star-input {
width:0;
height:0;
position:absolute;
left:-5000px;
&:checked {
+ .star-input-label {
.orange {
animation:enlarge .5s ease-in-out forwards;
}
&:nth-of-type(2){
.orange {
animation-delay:.1s;
}
}
&:nth-of-type(3){
.orange {
animation-delay:.2s;
}
}
&:nth-of-type(4){
.orange {
animation-delay:.3s;
}
}
&:nth-of-type(5){
.orange {
animation-delay:.4s;
}
}
}
}
}
.star-input-label {
display:inline-block;
padding:8px 2px;
text-indent:-5000px;
line-height:0;
color:#dcdcdc;
position:relative;
cursor:pointer;
&:hover,&.hovered {
color:#a7a7a7;
}
i {
display:block;
font-size:20px;
line-height:20px;
text-indent:0;
&.orange {
position:absolute;
display:block;
padding:8px 2px;
top:0;
left:0;
text-align:center;
width:100%;
color:orange;
transform:scale(0);
}
}
}
}
@keyframes enlarge {
0% {
transform:scale(0);
}
70% {
transform:scale(1.25);
}
100% {
transform:scale(1);
}
}
View Compiled
$('.star-input').click(function() {
$(this).parent()[0].reset();
var prevStars = $(this).prevAll();
var nextStars = $(this).nextAll();
prevStars.attr('checked',true);
nextStars.attr('checked',false);
$(this).attr('checked',true);
});
$('.star-input-label').on('mouseover',function() {
var prevStars = $(this).prevAll();
prevStars.addClass('hovered');
});
$('.star-input-label').on('mouseout',function(){
var prevStars = $(this).prevAll();
prevStars.removeClass('hovered');
})