纯css实现评分
用到的知识点:
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实现评分的更多相关文章
- 纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- xilinx Vivado的使用详细介绍(2):创建工程、添加文件、综合、实现、管脚约束、产生比特流文件、烧写程序、硬件验证
xilinx Vivado的使用详细介绍(2):创建工程.添加文件.综合.实现.管脚约束.产生比特流文件.烧写程序.硬件验证 Author:zhangxianhe 新建工程 打开Vivado软件,直接 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 搜索引擎选择: Elasticsearch与Solr(转)
搜索引擎选型调研文档 Elasticsearch简介* Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据. 它可以用于全文搜索,结构化搜索以及分 ...
- centos7配置consul
下载wget https://releases.hashicorp.com/consul/1.4.2/consul_1.4.2_linux_amd64.zip解压unzip consul_1.4.2_ ...
- day_其他操作符的重载
#include <iostream> #include <stdlib.h> using namespace std; class A{ public: A(void) { ...
- 内网环境使用ansible安装software 需要外网时,如何绑定代理呢
内网环境使用ansible安装software 需要外网时,如何绑定代理呢? 方法一: 在ansible 的脚本里,yum install 的地方,添加语句: environment: https_p ...
- 用JavaScript比较两个数组是否相等
JS怎么比较两个数组是否有完全相同的元素?Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false alert([0,0,0]= ...
- springboot访问数据库(MySql)
1.使用JDBC访问数据库:JDBC是用于在Java语言编程中与数据库连接的API <dependency> <groupId>org.springframework.boot ...
- CORS在Spring中的实现
CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...
- 浙江省住房和城乡建设厅 http://www.zjjs.com.cn/ 漏洞提示
http://220.189.211.52/zjjsgbxx/FileAttach/96dcdf11-c45e-4455-a443-f6dea8a44e23.html 可以下载,浏览 改修,