关于前端:星级评分纯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