用到的知识点:

  E:checked:单选或复选框被选中 

  E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点

  E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容

css代码:  

.star-box{display:table;}
.star-box label{float:right;color:#999;}
.star-box label::after{content:'★';font-size:28px;padding:5px;display:inline-block;line-height:1;}
.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover{color:red;}

html代码:

  <div class="star-box">
<input type="radio" name="star" id="star5" hidden/>
<label for="star5"></label> <input type="radio" name="star" id="star4" hidden/>
<label for="star4"></label> <input type="radio" name="star" id="star3" hidden/>
<label for="star3"></label> <input type="radio" name="star" id="star2" hidden/>
<label for="star2"></label> <input type="radio" name="star" id="star1" hidden/>
<label for="star1"></label>
</div>

效果图:

纯css实现评分的更多相关文章

  1. 纯CSS实现网站常用的五角星评分和分数展示交互效果

    最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...

  2. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  3. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  4. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  7. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  8. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  9. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. Linux下安装docker

    //安装docker //需要输入时 输y就可以yum install -y epel-releaseyum install docker-io # 加入开机启动chkconfig docker on ...

  2. day22

    # day22 ## 复习 ```python# 1.内存管理# 引用计数:垃圾回收机制工作原理# -- 引用就 +1 ,释放就 -1 , 当计数为0时,就会被垃圾回收机制回收 # 标记清除:解决循环 ...

  3. CentOS7服务管理

    1.在/usr/lib/systemd/system目录下建立服务启动文件,文件格式:[root@Centos7 ]# cat /usr/lib/systemd/system/nginx.servic ...

  4. SpringBoot+mybatis:报错Fri Oct 19 14:29:24 CST 2018 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requiremen

    报错:Fri Oct 19 14:29:24 CST 2018 WARN: Establishing SSL connection without server's identity verifica ...

  5. C语言缓冲区

    定义 缓冲区是内存空间的一部分,用于缓冲输入或输出的数据.根据其对应的是输入设备还是输出设备,分为输入缓冲区和输出缓冲区. 类型 缓冲区分为三种类型:全缓冲.行缓冲和不带缓冲. 1.全缓冲 在这种情况 ...

  6. nodemanager 无法启动报错“doesn't satisfy minimum allocations”

    在启动nodemanager节点nodemanager时候报错 2019-03-29 14:15:44,648 INFO org.apache.hadoop.yarn.server.nodemanag ...

  7. boost库中的 program_options

    1.阅读rviz中的源码时在rviz/visualizer_app.cpp中遇到如下代码: po::options_description options; options.add_options() ...

  8. python--网络编程requests

    一.requests 之前使用python自带的urllib模块去请求一个网站或者接口,但是urllib模块太麻烦了,传参数的话,都得是bytes类型,返回数据也是bytes类型,还得解码,想把返回结 ...

  9. mock js使用方法简单记录

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...