css星级评分制作

CSS星级评分制作方法

通过纯CSS实现星级评分系统，可以采用以下两种常见方案：

使用Unicode字符或图标字体

定义包含五颗星的容器，通过CSS控制选中状态：

<div class="star-rating">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
</div>

.star-rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 2rem;
}
.star-rating span {
  display: inline-block;
  color: #ddd;
  cursor: pointer;
}
.star-rating span:hover,
.star-rating span:hover ~ span {
  color: gold;
}
.star-rating input[type="radio"] {
  display: none;
}

使用radio输入控件

结合CSS伪类实现交互效果：

<div class="star-rating">
  <input type="radio" id="star5" name="rating" value="5">
  <label for="star5"></label>
  <input type="radio" id="star4" name="rating" value="4">
  <label for="star4"></label>
  <input type="radio" id="star3" name="rating" value="3">
  <label for="star3"></label>
  <input type="radio" id="star2" name="rating" value="2">
  <label for="star2"></label>
  <input type="radio" id="star1" name="rating" value="1">
  <label for="star1"></label>
</div>

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
}
.star-rating input {
  display: none;
}
.star-rating label {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: gold;
}

关键实现要点

• 使用direction: rtl或flex-direction: row-reverse实现从右向左的悬停效果
• 通过~选择器控制兄弟元素的样式变化
• 图标可以使用★字符、Font Awesome等图标库或SVG
• 结合:checked伪类实现选中状态持久化

动画增强

为悬停效果添加平滑过渡：

.star-rating label {
  transition: color 0.2s;
}

以上方案均无需JavaScript即可实现完整交互，可通过表单提交评分值。如需半星评分，需要额外设计图标和更复杂的CSS逻辑。