关于前端:星级评分纯CSS实现单选框的个性化使用

本案例为课上学习成绩，该文章仅作为学习总结记录，欢送学习交换。

一、展现

二、构思

1. 根本元素

   • input 单选框 + 伪类
   • 空星 + 选中后的星 —> iconfont

2. 实现成果

   • 鼠标悬停成果
   • 点击成果
   • 以上两个成果产生时联动其后面的星星产生雷同的成果

三、实现

1. html 局部双层结构（rate-content+radio*5）

<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">
    <!-- 具备雷同 name 的单选框只能选一个 -->
  </div>

1. css 局部（input(radio)+::before&after+input(radio):checked+hover）

/* 打消单选框默认款式 */
    input {
      appearance: none;
      border: none;
      outline: none;
      cursor: pointer;
    }
    .rate-content {
      display: flex;  /* 弹性容器，按比例继承宽高 */
      flex-flow: row-reverse; /* 元素反向排列 */
      float:left;
      margin-top: 200px;
      margin-left: 200px;
    }
    /* 选中所有为 name 属性的选择器 */
    input[name="rate"] {
      font-family: "iconfont";
      font-size: 30px;
      padding-right: 10px;
      transition: all 0.4s ease; /* 元素变动的过渡工夫 */
    }
    input[name="rate"]::after {
      content:"\f2d3";
      color: #999;
    }
    input[name="rate"]:checked::after{
      content:"\e61a";
      color: #ffa822;
    }
    input[name="rate"]:hover{transform: scale(1.2);   /* 缩放 */
    }
    input[name="rate"]:hover::after{
      content:"\e61a";
      color: #ffa822;
    }
    /* 兄弟选择器  选上面所有的兄弟 */
    input[name="rate"]:checked ~ input[name="rate"]::after {
      content:"\e61a";
      color: #ffa822;
    }
     input[name="rate"]:hover ~ input[name="rate"]::after {
      content:"\e61a";
      color: #ffa822;
    }

### 四、总结

{
    appearance: none;
    border: none;
    outline: none;
}

1. flex 布局

   与兄弟选择器配合应用：兄弟选择器抉择的是某元素前面的选择器，而 flex-flow: row-reverse 让其排列到后面达到所需成果

   display: flex;  /* 弹性容器，按比例继承宽高 */
   flex-flow: row-reverse; /* 元素反向排列 */

2. 属性选择器

   • 根本应用

     input[name="rate"] 示意选中所有为 name 属性的选择器

   • 属性选择器 + 伪类

     input[name="rate"]::after

   • 属性选择器 + 伪类 + 状态

     input[name="rate"]:checked::after

   • 属性选择器 +:hover

     • 达到缩放成果
     • 与选中成果统一

 ``input[name="rate"]:hover``

• ~（兄弟选择器）：查找某一个指定元素的 <u> 前面 </u> 的所有兄弟结点

  / 兄弟选择器 选上面所有的兄弟 /

  ↓ 抉择所有曾经被选中的名为 rate 的 input 框前面的所有名为 rate 的 input 框的伪类兄弟

  input[name="rate"]:checked ~ input[name="rate"]::after