纯CSS评星组件：以精湛技艺，缔造视觉盛宴

2024-01-01 02:53:35

纯CSS评星组件：超越框架，尽显创意

在网页设计中，评星组件可谓是锦上添花的存在。它不仅可以为网站或应用增添互动性，还能帮助用户更直观地表达他们的意见或喜好。然而，传统的评星组件往往需要借助JavaScript或其他编程语言来实现，这对于初学者来说可能并不友好。

纯CSS评星组件则突破了传统的限制，仅依靠CSS就能实现评星效果。这种方法不仅简单易学，而且跨浏览器兼容性极佳，甚至可以追溯到早期的浏览器版本。

制作过程：循序渐进，精益求精

HTML结构：构建组件框架

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

首先，我们创建一个<div>元素作为评星组件的容器，并在其中放置五个<input>元素作为评星按钮，每个按钮对应一个评星等级。然后，我们为每个<input>元素添加一个<label>元素，用于显示评星等级。

CSS样式：点亮璀璨之星

.star-rating {
  display: flex;
  justify-content: center;
  align-items: center;
}

.star-rating input {
  display: none;
}

.star-rating label {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  cursor: pointer;
}

.star-rating label:before {
  content: "\2605";
  font-size: 20px;
  color: #ccc;
}

.star-rating input:checked + label:before {
  color: #f90;
}

接下来，我们使用CSS来为评星组件添加样式。首先，我们设置<div>元素为Flex布局，以便将评星按钮居中排列。然后，我们隐藏<input>元素，并设置<label>元素的样式，使其可以作为按钮点击。

接下来，我们使用CSS的:before伪元素在<label>元素中添加一个星星符号，并设置其初始颜色为浅灰色。最后，我们使用:checked伪类为选中的<input>元素添加样式，使其对应的<label>元素中的星星符号变为金色。

JavaScript脚本：锦上添花，交互升级

const ratingInputs = document.querySelectorAll('.star-rating input');

ratingInputs.forEach((input) => {
  input.addEventListener('change', (event) => {
    const ratingValue = event.target.value;
    console.log(`Rating: ${ratingValue}`);
  });
});