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

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

HTML

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

你可能感兴趣的:(前端开发)