伪类checked
困惑了好久的复选框自定义样式终于有了谜底，原来就是一个 :checked 伪类
他的意思就是 匹配任意被勾选/选中的radio（单选按钮），chexked（复选框），或者option（select项）
:checked 伪类 用法：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
input[type='checkbox']{
width: 14px;
height: 14px;
-webkit-appearance: none;
/* 此处一定的去除默认的样式！！！！ */
background: url(./1.svg)no-repeat center;
width: 50px;
height: 50px;
outline: none;
}
input[type='checkbox']:checked{
/* :checked代表就是选中的时候，怎么怎么滴，是个伪类 */
background: url(./2.svg)no-repeat center;
}
</style>
</head>
<body>
<input type="checkbox" id="pro">
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义复选框-jq22.com</title>
<style>
label {
width:20px;
height:20px;
border:1px solid #000;
display:inline-block;
vertical-align:top;
border-radius: 50%;
}
input {
display:none;
}
input:checked+label {
text-align:center;
line-height:20px;
background:red;
/*这里可以加设计好的对勾图片，以背景的方式加上去 下面的伪类样式就可以不用加了*/
}
input:checked+label::after {
content:"\2714";
color:#fff
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="" id="语文">
<label for="语文"></label><span> 语文</span>
</div> <!-- input:checked + label
input:checked ~ label
input:checked ~ label ：相邻同胞选择器，选择被勾选的input标签后 所有的label标签［input 和 label标签有共同的父元素］；
input:checked ＋ label ：相邻同胞选择器，选择被勾选的input标签后 第一个label标签［input 和 label标签有共同的父元素］； --> <script>
</script> </body>
</html>
你知道穷人最缺的是什么吗？只有愚蠢的人才会说 “钱” ，穷人最缺的是想成为有钱人的野心……
伪类checked的更多相关文章
- css 伪类选择器:checked实例讲解
css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- 深入理解CSS伪类
× 目录 [1]锚点 [2]UI元素 [3]结构伪类[4]其他 前面的话 伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到.实际上c ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS3初学篇章_2（伪类选择符）
id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- JPA 继承关系实现的三种方式
single table 一张表保存所有类型 join 扩展属性保存在子表中 TABLE_PER_CLASS 每个类型一张表
- python 根据字典的键值进行排序
1.利用key排序 d = {'d1':2, 'd2':4, 'd4':1,'d3':3,} for k in sorted(d): print(k,d[k]) d1 2d2 4d3 3d4 1 2. ...
- CF585F Digits of Number Pi
题目 把\(s\)串所有长度为\(\lfloor \frac{d}{2}\rfloor\)的子串插入一个ACAM中,之后数位dp就好了,状态是\(dp_{i,j,0/1}\)第\(i\)位,在ACAM ...
- 两分钟学会Unity3D布娃娃的使用
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangbin_jxust/article/details/28587233 在RPG游戏中,为了让人 ...
- Pytest 通过文件名类名方法执行部分用例
• 场景:只执行符合要求的某一部分用例,通过类与方法的命名实 现.通常编写测试方法时 • 解决:直接输入文件名,类名 pytest test_class_01.py • pytest -v -s te ...
- 第七章 yaml格式
一.简单说明 yaml是一个可读性高,用来表达数据序列的格式.YAML 的意思其实是:仍是一种标记语言,但为了强调这种语言以数据做为中心,而不是以标记语言为重点 二.基本语法 缩进时不允许使用Tab键 ...
- HttpClient异常处理手册
HttpClient异常处理手册 开源中国 发表于 2014-08-26 19:44:06 异常处理 HttpClient的使用者在执行HTPP方法(GET,PUT,DELETE等),可能遇到会两种主 ...
- mysql通过表空间来恢复或者传递数据
mysql的备份工具通常有 mysqldump ,mysqlpump(5.7后新特性)等备份工具,这里我们可以尝试使用表空间进行传递 方式是:拷贝数据文件+拷贝表空间 对应innodb引擎就是 i ...
- Delphi ADOQuery的 DisableControls 和 EnableControls方法
DisableControls方法是在程序修改或后台有刷新记录的时候切断数据组件,如TTABLE.ADOQUERY等等与组件数据源的联系.如果没有切断,数据源中只要一有数据的改动,尤其是批量改动的话, ...
- Jlink V8固件恢复
使用附件中的PDF文档步骤即可,但是千万千万记得两点,更新系统很关键,很关键 1.WINXP系统 2.32Bit系统 切记切记,其他的win7,winxp 64就不用试着更新了,全部是坑 大概步骤 J ...