纯CSS实现星级评分特效组件

参考掘金的文章：https://juejin.im/post/5d57adf5f265da03e3697e1b（作者：聪明的汤姆）

HTML

<form action="" onsubmit="return false">
    <div class="parent">
      <input type="radio" name="rate" class="star">
      <input type="radio" name="rate" class="star">
      <input type="radio" name="rate" class="star">
      <input type="radio" name="rate" class="star">
      <input type="radio" name="rate" class="star">
    </div>
    <button type="submit">提交</button>
  </form>

CSS

:checked，选择每个被选中的.star元素（即被选中的input元素）。

~，选择.star:checked元素后面的全部input兄弟元素。

.parent {
      display: flex;
      flex-flow: row-reverse; /*反转.star元素的水平方向排列方式*/
      width: 150px;
      font-size: 0px;
    }

    input { /* 取消radio默认样式 */
      -webkit-appearance: none; 
      border: none;
      outline: none;
      cursor: pointer;
      margin: 0px;
    }

    .star { 
      height: 30px;
      width: 30px;
      background: url("./img/star.svg") no-repeat;
      background-size: 30px;
    }

    .star:checked,
    .star:checked~input {
      background: url("./img/star-fill.svg") no-repeat;
      background-size: 30px;
    }

    .star:hover,
    .star:hover~input {
      background: url("./img/star-fill.svg") no-repeat;
      background-size: 30px;
    }

JS

// JS是为了展示如何获得评分的值
document.querySelector("[type=submit]").addEventListener("click", () => {
    alert(getRate());
  })

  function getRate() {
    let rateList = document.querySelectorAll("[name=rate]");
    for (let i = 0; i < rateList.length; i++) {
      if (rateList[i].checked)
        return 5 - i; // 因为flex-flow: row-reverse把.star元素倒置了
    }
    return "未评分"
  }

我的主页：https://blog.csdn.net/qq_29750277