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

42次阅读

共计 1677 个字符，预计需要花费 5 分钟才能阅读完成。

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

根本元素
- input 单选框 + 伪类
- 空星 + 选中后的星 —> iconfont
实现成果
- 鼠标悬停成果
- 点击成果
- 以上两个成果产生时联动其后面的星星产生雷同的成果

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>

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;
}

flex 布局

与兄弟选择器配合应用：兄弟选择器抉择的是某元素前面的选择器，而 flex-flow: row-reverse 让其排列到后面达到所需成果
```
display: flex;  /* 弹性容器，按比例继承宽高 */
flex-flow: row-reverse; /* 元素反向排列 */
```
属性选择器
- 根本应用
  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

正文完