纯css实现checkbox的checked样式

2024-09-07 21:58

本文主要是介绍纯css实现checkbox的checked样式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

纯css也能实现checked样式

今天使用微信的WEUI的checkbox的时候,发现点击checkbox是有checked和unchecked的变化的,但是想要去获得checkbox的checked状态时,发现event listener里居然没有该checkbox的click之类的事件。这才发现,weui只是纯粹的css样式,没有对应组件的js代码。那么问题来了,没有js事件,weui是如何实现checkbox的checked样式变化的?

先看看html代码

<div class="weui-cells weui-cells_checkbox"><label class="weui-cell weui-check__label" for="s11"><div class="weui-cell__hd"><input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"><i class="weui-icon-checked"></i></div><div class="weui-cell__bd"><p>standard is dealt for u.</p></div></label>
</div>

据我观察发现,checkbox的checked状态变化是由<i class="weui-icon-checked"></i>这个标签变化实现的。

看看weui里checkbox的css是如何写的

.weui-cells_checkbox .weui-icon-checked:before{content:'\EA01';color:#c9c9c9;font-size:23px;display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{content:'\EA06';color:#09BB07;
}

以上就是weui中checkbox在checked状态时的css,观察这段css的选择器,其中的‘+‘是什么意思?‘:checked‘又是什么意思?content的值对应的是啥?

css选择器中‘+‘代表什么?

事实上,‘+‘号代表的是相邻兄弟选择器,举个栗子。
第一个例子,可以在w3school上看到
h1 + p {margin-top:50px;}
在这个例子中,可以看到,只有紧跟h1的那一个p标签应用上了这段css,后面的p标签都没起作用。这也正应了这个选择器的名字,“相邻“兄弟选择器。

我们再来看第二个例子
li + li {font-weight:bold;}
这个例子中,只有第二个和第三个的li标签应用上了css,而第一个并没有被应用上。这说明了,这段css针对的元素是‘+‘号后面的那个元素,而不是对‘+‘号前后都起了作用。这点说白了都懂,但当‘+‘号前后标签相等,比如例二时,比较容易被迷惑。
回到例二,由于只对相邻的两个li标签中的后者起作用,所以,当有三个并列的li标签时,只有后两个应用了该css

‘css中:checked‘是什么意思?

根据w3school中的说明,‘:checked‘也是一种选择器,用来选择input被checked的元素

content对应的值是啥?

content对应的值事实上是字符编码,具体对应的样式,可以自己制定。

回头来看刚刚的css代码

.weui-cells_checkbox .weui-icon-checked:before{content:'\EA01';color:#c9c9c9;font-size:23px;display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{content:'\EA06';color:#09BB07;
}

现在再来看,那么意思就很明确了。当class为weui-check的input被checked时,将紧跟其后的weui-icon-checked改为选中状态,css样式作出相应的变化,即颜色变绿,内容变为对勾。当为非checked状态时,前一段css代码就起作用了,颜色变灰,内容为空圆圈。

总结

学习到了纯css,不经过js更改checkbox的样式的方法。以前用Semantic UI都是对checkbox增删checked class来实现样式变化,这次倒是打开新世界大门了。或许这种css控制样式更改才是本来的做法,我有些倒置了。
最近一直也在反思,研究生期间做的这些活,为了满足开发速度,都是现查现用,都没有好好思考背后的原理,背后的技术,越来越变得像“培训机构出来的“了。能做业务,但是技术基础很差,问下原理就都不懂了。惭愧惭愧,这也是自己的原因,没有在空闲时补充基础,唉,努力吧,学海无涯。
btw,jq获取checkbox是否被checked的方法:
$('.checkbox').is(':checked')注意checked前面有冒号!

这篇关于纯css实现checkbox的checked样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146272

相关文章

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

一文详解如何从零构建Spring Boot Starter并实现整合

《一文详解如何从零构建SpringBootStarter并实现整合》SpringBoot是一个开源的Java基础框架,用于创建独立、生产级的基于Spring框架的应用程序,:本文主要介绍如何从... 目录一、Spring Boot Starter的核心价值二、Starter项目创建全流程2.1 项目初始化(

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

mysql数据库重置表主键id的实现

《mysql数据库重置表主键id的实现》在我们的开发过程中,难免在做测试的时候会生成一些杂乱无章的SQL主键数据,本文主要介绍了mysql数据库重置表主键id的实现,具有一定的参考价值,感兴趣的可以了... 目录关键语法演示案例在我们的开发过程中,难免在做测试的时候会生成一些杂乱无章的SQL主键数据,当我们

SpringBoot配置Ollama实现本地部署DeepSeek

《SpringBoot配置Ollama实现本地部署DeepSeek》本文主要介绍了在本地环境中使用Ollama配置DeepSeek模型,并在IntelliJIDEA中创建一个Sprin... 目录前言详细步骤一、本地配置DeepSeek二、SpringBoot项目调用本地DeepSeek前言随着人工智能技

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

MySQL多列IN查询的实现

《MySQL多列IN查询的实现》多列IN查询是一种强大的筛选工具,它允许通过多字段组合快速过滤数据,本文主要介绍了MySQL多列IN查询的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析与优化1.

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》:本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调

Python实现自动化接收与处理手机验证码

《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.