仅3行核心css代码的rate评分组件

最新推荐文章于 2024-03-16 18:44:31 发布

IT码农-爱吃辣条

最新推荐文章于 2024-03-16 18:44:31 发布

阅读量1.8k

点赞数

分类专栏： css

原文链接：https://mp.weixin.qq.com/s/Cw-0jN4vN2w0OziiNe2JqQ

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原理

主要是借助radio单选框，梳理如下：

去找个好看的iconfont；
借用5个radio单选框，把默认样式都去掉，显示默认的星星；
用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；
然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮💥；
把5个radio单选框反向排列❗；

注意事项

所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>index</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">
  <style>
    /* 去掉默认样式 */
    input {
      /* Safari Chrome */
      -webkit-appearance: none;
      /* Firefox */
      -moz-appearance: none;
      border: none;
      outline: none;
      cursor: pointer;
    }

    .content {
      display: inline-block;
    }

    .rate-content {
      /* 元素反向排列 */
      display: flex;
      flex-flow: row-reverse
    }

    /* 单个星星 */
    input[name="rate"] {
      /* 之前引入的iconfont字体 */
      font-family: "iconfont";
      font-size: 30px;

      padding-right: 10px;
      transition: transform .2s ease;
    }

    /* 默认显示的星星 */
    input[name="rate"]::after {
      content: "\e645";
      color: #999;
      /* 加点颜色过渡效果 */
      transition: color .4s ease;
    }

    /* 选中与移上去样式变化 */
    input[name="rate"]:checked::after,
    input[name="rate"]:checked~input[name='rate']::after,
    input[name="rate"]:hover::after,
    input[name="rate"]:hover~input[name='rate']::after {
      content: "\e73c";
      color: #ffa822;
    }

    input[name="rate"]:hover {
      transform: scale(1.3);
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="rate-content">
      <input type="radio" name="rate">
      <input type="radio" name="rate">
      <input type="radio" name="rate">
      <input type="radio" name="rate">
      <input type="radio" name="rate">
    </div>
  </div>
</body>

</html>