Tạo giao diện đánh giá sao đơn giản với CSS

Để tạo giao diện đánh giá sao đơn giản với CSS, bạn có thể sử dụng thư viện Font Awesome kết hợp với các lớp CSS tùy chỉnh. Dưới đây là ví dụ hoàn chỉnh:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 30px;
    }
    .fa {
      font-size: 30px;
      color: grey;
    }
    .rated {
      color: rgb(255, 0, 0);
      border: 2px solid yellow;
    }
  </style>
</head>
<body>
  <h1>Ví dụ Đánh Giá Sao</h1>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
</body>
</html>

Kết quả

Mã trên sẽ tạo ra 5 ngôi sao, trong đó 3 ngôi sao đầu được đánh giá (màu đỏ, viền vàng) và 2 ngôi sao còn lại chưa được đánh giá (màu xám).

Giải thích

• Sử dụng .fa để định kiểu chung cho các biểu tượng Font Awesome
• Lớp .rated áp dụng màu đỏ và viền vàng cho các sao đã chọn
• Có thể mở rộng bằng JavaScript để làm cho đánh giá sao có tương tác