3行核心CSS代码的rate评分组件，秀到你怀疑人生

–

梳理如下：

1. 去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、；

2. 借用5个radio单选框，把默认样式都去掉，显示默认的星星；

3. 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；

4. 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮；

5. 把5个radio单选框反向排列 ❗；

代码

–

基本布局

这是我事先生成好的iconfont

一个很简洁的布局：

先把默认的星星显示出来

/* 去掉默认样式 */

input {

-webkit-appearance: none;

border: none;

outline: none;

cursor: pointer;

}

:root {

/高亮颜色/

–main: #ffa822;

/默认颜色/

–basic: #999;

}

.rate-contentinput[name=“rate”] {

font-family: “iconfont”;

/之前引入的iconfont字体/

font-size: 30px;

padding-right: 10px;

}

.rate-c