<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
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js