三种方式使用纯 CSS 实现星级评分

这篇具有很好参考价值的文章主要介绍了三种方式使用纯 CSS 实现星级评分。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文介绍三种使用纯 CSS 实现星级评分的方式。每种都值得细品一番~

三种方式使用纯 CSS 实现星级评分

五角星取自 Element Plus 的 svg 资源

三种方式使用纯 CSS 实现星级评分

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="">
    <path
        fill="currentColor"
        d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z">
    </path>
</svg>

三种实现方式的 html 结构是一样的

<div>
  <input type="radio" name="radio" id="radio1">
  <label for="radio1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio2">
  <label for="radio2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio3">
  <label for="radio3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio4">
  <label for="radio4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio5">
  <label for="radio5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
</div>

利用 radio + label 的方式实现点击效果;将 labelfor 属性保持和 radioid 一致,并将 radio 框隐藏,这样点击 label 就是点击 radio 了;label 在这里就是每个星星;

html,body{
  width:100%;height:100%;
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
}
div{
  display : flex;
  justify-content:center;
  align-items:center;
}

div input{
  display:none;
}

div label{
  width:50px;height:50px;
  padding:0 4px;
  color:#ccc;
  cursor:pointer;
}

html 布局效果如下:

三种方式使用纯 CSS 实现星级评分

通常星级评分效果包括鼠标滑入和点击,滑入或点击到第几颗星的位置,该位置之前的星高亮,之后的星不高亮或者有高亮的则取消高亮;

接下来分别阐述三种 CSS 实现方式;

1、:has()选择器 + input:checked

当点击星星时,高亮当前星星

input:checked + label{
    color:gold;
}

input:checked + label 表示 选择紧挨着已选中 input 框的后面一个 label;

当鼠标移入星星时,高亮当前星星,并且该位置之后的星星取消高亮;

label:hover{
  cursor:pointer;
  color:gold;
  & ~ label{
    color:#ccc!important;
  }
}

那么如何让该位置之前的星星也高亮呢,目前的兄弟选择器包括 + 和 ~ ,但都不能选择之前的兄弟元素;此时 :has() 选择器就登场了;

:has() 提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

比如:

a:has(p) 表示选择包含子元素 p 的 a 元素;

a:has(> p) 表示选择有直接后代 p 元素的 a 元素,也就是 p 只能是 a 的 "儿子" 元素;

a:has(+ p) 表示选择后面紧跟着的兄弟元素是 p 的 a 元素;

所以回到上面问题,当鼠标移入星星时,让该位置之前的所有星星也高亮,可以这么做

div:has(label:hover) label:not(:hover,:hover ~ *){
  color:gold;
}

label:not(:hover,:hover ~ *) 表示排除当前 hover 的 label 和之后的所有元素;也就自然选择了前面所有星星;

三种方式使用纯 CSS 实现星级评分

同样,当点击星星时,点亮当前选择的之前所有的星星也如此

div:has(input:checked) label:not(input:checked ~ label){
  color:gold;
}

div:has(input:checked) 表示选择包含被选中的 input 的 div;

label:not(input:checked ~ label) 表示排除当前选中的 input 后面的所有 label,也就选择到前面所有的 label 了;

完整示例

三种方式使用纯 CSS 实现星级评分

2、:indeterminate + input:checked 巧妙实现

这种实现的思路是,假设初始所有的星星都是高亮的,鼠标移入或点击时保持前面星星的高亮,取消后面星星的高亮;

div label{
  width:50px;height:50px;
  padding:0 4px;
  color:gold;  => 默认星星高亮
  cursor:pointer;
}

三种方式使用纯 CSS 实现星级评分

然后当鼠标移入或点击时,取消该位置后面的星星的高亮

div input:checked ~ input + label,
div label:hover ~ label{
  color:#ccc;
}

三种方式使用纯 CSS 实现星级评分

但一开始默认设置的星星是高亮的,但页面上并不想在 radio 未被选中时高亮,这时 :indeterminate 就登场了;

:indeterminate 表示任意的状态不确定的表单元素。对于 radio 元素,:indeterminate 表示当表单中具有相同名称值的所有单选按钮均未被选中时。

所以这里设置每个星星在对应的 radio 的未被选中时非高亮;并且只是在初始状态,鼠标移入时这种初始状态就应该被改变

div:not(:hover) input:indeterminate + label,
div:not(:hover) input:checked ~ input + label,
div input:hover ~ input + label{
  color:#ccc;
}

:not() 表示用来匹配不符合一组选择器的元素;div:not(:hover) 表示鼠标移入时,不匹配这行规则,这样在初始状态下或者在鼠标点击星星后,鼠标移入仍然会高亮当前点击位置之前的星星;

这样效果就达到了;

完整示例

三种方式使用纯 CSS 实现星级评分

3、flex-direction:row-reverse; + input:checked 巧妙实现

目前 html 布局是从左到右布局,但如果我们倒过来呢,从右到左布局;

div{
  width:300px;
  display:flex;
  /* 从右往左排列 */
  flex-direction:row-reverse;
  justify-content:space-around;
}

三种方式使用纯 CSS 实现星级评分

那么之前利用 :has() 选择之前的兄弟元素现在就可以直接用 ~ 来选择了;

// 之前
label:not(input:checked ~ label){
  color:gold;
}

// 现在
label:hover ~ label{
  color:gold;
}

三种方式使用纯 CSS 实现星级评分

点击星星也是

input:checked ~ label{
  color:gold;
}

但是这样还不够完善

三种方式使用纯 CSS 实现星级评分

当我们点击第二颗星星时,鼠标滑入到第三个星星,第二颗星星并没有取消高亮,所以这里还是得借助下 :has()

label:has(~ label:hover){
  color:#ccc;
}

上面表示选择后面被 hover 的兄弟元素的元素,也就是 hover 元素的前面的所有元素;这样就没问题了;

完整示例

三种方式使用纯 CSS 实现星级评分

总结

以上使用了三种纯 css 实现星级评分的方式;

  • :has()选择器 + input:checked
  • :not()选择器 + input:checked
  • flex-direction:row-reverse; + input:checked 巧妙实现

特别是 :has() 选择器可以选择之前的兄弟元素,搭配 :not() 能发挥很多作用,以前很多需要用 js 实现的效果或许现在可以用 :has() 来试试了;

附上 :has():not() 的兼容性截图

:has()

三种方式使用纯 CSS 实现星级评分

:not()

三种方式使用纯 CSS 实现星级评分

各位看官们,如果对本文感兴趣,麻烦动动你们的发财手,点点赞~文章来源地址https://www.toymoban.com/news/detail-839761.html

到了这里,关于三种方式使用纯 CSS 实现星级评分的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 01_前端css编写的三种方式

    前言 CSS的引入方式共有三种:行内样式、内部样式表、外部样式表 用法: 在元素上直接通过style属性进行设置css样式设置 示例: 实际在写页面时不提倡使用,在测试的时候可以使用。 例如: 用法: 在style标签中书写CSS代码。style标签写在head标签中 例如: 用法: CSS代码保

    2024年02月09日
    浏览(40)
  • CSS的三种链接方式(内联式、嵌入式、外部式)

    其实就是用html中style属性 嵌入式css样式,就是可以把css样式代码写在style type=“text/css”/style标签之间。 (样式一多,内联式就很繁杂,不易于阅读和维护,这没法发挥CSS的优势了) 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“

    2024年02月06日
    浏览(56)
  • 【Python三种打包方式】分别使用PyInstaller & setupTools & 拷贝环境实现项目打包

    pyinstaller 和 setuptools 打包有什么区别(来自 ChatGPT 的答案) pyinstaller 和 setuptools 都是 Python 中常用的打包工具,但它们的主要目的和工作方式略有不同。 pyinstaller 是一个可以将 Python 代码 打包成一个可执行文件的工具 ,它会将你的 Python 代码和所有依赖项打包成一个单独的可

    2024年02月03日
    浏览(50)
  • STM32使用三种方式(阻塞、中断、DMA)实现串口发送和接收数据

    记录下学习STM32开发板的心得的和遇见的问题。 板卡型号:STM32F405RGT6 软件:STM32CubeMX、IAR STM32串口外设提供了3种接收和发送方式:阻塞、中断、DMA,主要给大家分享中断方式接收不定长数据和DMA使用空闲中断接收不定长数据。 阻塞发送: 阻塞接收: 两个函数需要注意的就

    2024年02月03日
    浏览(46)
  • Java多线程 - 创建的三种方式介绍

    什么是线程 ? 线程(thread)是一个程序内部的一条执行路径。 我们之前启动程序执行后,main方法的执行其实就是一条单独的执行路径。 程序中如果只有一条执行路径,那么这个程序就是单线程的程序。 什么是多线程 ? 多线程是指从软硬件上实现多条执行流程的技术。 方式一

    2024年02月20日
    浏览(45)
  • 无线路由器的三种加密方式详细介绍

      无线路由器主要提供了三种无线安全类型:WPA-PSK/WPA2-PSK、WPA/WPA2 以及WEP。不同的安全类型下,安全设置项不同。 1. WPA-PSK/WPA2-PSK WPA-PSK/WPA2-PSK安全类型其实是WPA/WPA2的一种简化版本,它是基于共享密钥的WPA模式,安全性很高,设置也比较简单,适合普通家庭用户和小型企业使

    2024年02月06日
    浏览(61)
  • Spring 框架入门介绍及IoC的三种注入方式

    目录 一、Spring 简介 1. 简介 2. spring 的核心模块 ⭐  二、IoC 的概念 2.1 IoC 详解 2.2 IoC的好处 2.3 谈谈你对IoC的理解 三、IoC的三种注入方式 3.1 构造方法注入 3.2 setter方法注入 3.3 接口注入(自动分配) 3.4 spring上下文与tomcat整合 3.5 总结         Spring框架 是 Java 平台的一个

    2024年02月12日
    浏览(47)
  • 路由器连接电脑的三种方式和设置介绍

    路由器怎么连接电脑进行设置呢?目前随着电脑、智能手机、平板电脑等网络设备的普及,人们对网络的需求日益增加,因此推动了路由器的广泛使用。不过很多大多数用户不知道怎样把路由器和电脑连接起来,然后进行后续的配置。 路由器与电脑之间的连接方式有两种,一

    2024年02月08日
    浏览(42)
  • 大数据Flink(五十八):Flink on Yarn的三种部署方式介绍

    文章目录 Flink on Yarn的三种部署方式介绍 一、​​​​​​​Session模式

    2024年02月13日
    浏览(43)
  • 大数据Flink(五十九):Flink on Yarn的三种部署方式介绍以及注意

    文章目录 Flink on Yarn的三种部署方式介绍以及注意 一、Pre-Job 模式部署作业

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包