Tạo Star Rating đơn giản bằng HTML radio & CSS3

Star Rating là tiện ích khảo sát, đánh giá của người dùng đối với Website. Có tiện ích star rating trông website của chúng ta sẽ chuyên nghiệp hơn, đặc biệt khi website của bạn là 1 website bán hàng thì việc nhận phản hổi của khách hàng là điều rất quan trọng, để bạn có thể điều chỉnh quy cách phục vụ, giao diện, thông tin sản phẩm... nhằm phục vụ khách hàng ngày một tốt hơn.

Vì vậy trong bài này mình giới thiệu đến các bạn một cách đơn giản để làm Star Rating. bạn chỉ cần kết hợp HTML radio và thuộc tính CSS3 để thiết kế tiện ích khỏa sát người dùng.

HTML

Ta tạo cấu trúc html cho mẫu rating đơn giản như sau:

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

Và ta chèn thêm thư viện font Awesome để tạo hình icon ngôi sao.

<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>

CSS Và đoạn css sau sẽ giúp ta tạo hiệu ứng cho các ngôi sao.

div.stars {
  width: 270px;
  display: inline-block;
}
 
input.star { display: none; }
 
label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}
 
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
 
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}
 
input.star-1:checked ~ label.star:before { color: #F62; }
 
label.star:hover { transform: rotate(-15deg) scale(1.3); }
 
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}

Và đây là kết quả:

Chỉ đơn giản vậy thôi là ta đã có được Star Rating cho website của mình rồi. Từ giờ, bạn có thể dễ dàng nhận được kết quả khảo sát từ phía khách hàng về website và sản phẩm... của mình.

Chúc các bạn thành công !