Tạo giao diện đánh giá đơn giản bằng CSS3

Tạo giao diện đánh giá đơn giản bằng CSS3

Trong nhiều trường hợp ta cần hiển thị giao diên cho người dùng đánh giá chất lượng từ 1 đến 5 sao (★). Với CSS3 ta có thể tạo ra giao diên đơn giản này như sau:

Chuẩn bị 5 ngôi sao rỗng, đặt class cho nó là rating:

<div class="rating">
      <span>✰</span><span>✰</span><span>✰</span><span>✰</span><span>✰</span>
</div>

Sử dụng thuộc tính content của CSS3 để đặt sao () màu vàng vào thay thế cho sao rỗng (✰)

.rating {
	text-align: center;
	unicode-bidi: bidi-override;
	direction: rtl;
}
.rating > span {
	display: inline-block;
	position: relative;
	width: 1.1em;
	cursor: default;
}
.rating > span:hover,
.rating > span:hover ~ span {
	color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
	content: "★";
	position: absolute;
	left: 0;
	color: gold;
}

Xem demo tại đây: DEMO Tạo giao diện đánh giá đơn giản bằng CSS3

Bạn cũng có thể thay sao rỗng (✰) bằng các ký tự khác như: ✡ ✩ ✪ ✰ ☆ ✫ ❂ ✺ ✶ ❈

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!