用3行核心CSS代码实现轻量级的rate评分组件

2023-12-05 15:27:11

简洁且高效的CSS实现

传统的rate评分组件通常使用JavaScript编写，代码相对复杂且冗长。而本文提供的CSS实现仅需3行核心代码，即可实现一个美观且功能齐全的rate评分组件。

/* HTML结构 */
<div class="rate-container">
  <input type="radio" id="rate-1" name="rate" value="1">
  <label for="rate-1">1</label>
  <input type="radio" id="rate-2" name="rate" value="2">
  <label for="rate-2">2</label>
  <input type="radio" id="rate-3" name="rate" value="3">
  <label for="rate-3">3</label>
  <input type="radio" id="rate-4" name="rate" value="4">
  <label for="rate-4">4</label>
  <input type="radio" id="rate-5" name="rate" value="5">
  <label for="rate-5">5</label>
</div>

/* CSS样式 */
.rate-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rate-container input[type="radio"] {
  display: none;
}

.rate-container label {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.rate-container label:hover {
  background-color: #eee;
}

.rate-container input[type="radio"]:checked + label {
  background-color: #ffcc00;
  color: #fff;
}