<div class="wrap">
<ul class="stars">
<li title="5"></li>
<li title="4"></li>
<li class="active" title="3"></li> <!--pre selected -->
<li title="2"></li>
<li title="1"></li>
</ul>
<input id="rating" type="hidden" class="required">
</div>
$stars-settings: (
'font-size': 48px,
'color': #f0b111,
'unset-color': #c3c3c3
);
$icon: (
'star': "\f005",
'star-o': "\f006"
);
%icon {
font: {
family: FontAwesome;
weight: normal;
style: normal;
}
display: inline-block;
text-decoration: inherit;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
vertical-align: middle;
}
@mixin icon($icon) {
&::before {
@extend %icon;
content: $icon;
}
}
// Reset
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
// Icon Font
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
body {
background-color: #efefef;
}
* {
box-sizing: border-box;
}
.wrap {
display: inline-block;
padding: 4rem 2rem;
width: 100%;
text-align: center;
}
.stars {
unicode-bidi: bidi-override;
direction: rtl;
display: inline-block;
text-align: left;
li {
cursor: pointer;
display: block;
float: right;
padding: 0 0.375rem;
display: inline-block;
font-size: map-get($stars-settings, 'font-size');
color: map-get($stars-settings, 'unset-color');
@include icon( map-get($icon, 'star-o') );
&.active,
&.active ~ li,
&:hover,
&:hover ~ li {
color: map-get($stars-settings, 'color');
@include icon( map-get($icon, 'star') );
}
}
}
View Compiled
$('.stars li').on('click', function() {
var el = $(this);
el.addClass('active').siblings().removeClass('active');
$('#rating').val( el.attr('title') ); // save value
});
This Pen doesn't use any external CSS resources.