困惑了好久的复选框自定义样式终于有了谜底，原来就是一个 :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的更多相关文章

  1. css 伪类选择器:checked实例讲解

    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...

  2. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

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

  3. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  4. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  5. 深入理解CSS伪类

    × 目录 [1]锚点 [2]UI元素 [3]结构伪类[4]其他 前面的话 伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到.实际上c ...

  6. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  7. CSS3初学篇章_2（伪类选择符）

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  8. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  9. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

随机推荐

  1. Linux折腾

    安装了一圈发行版,最后发现还是Fedora最稳定 debian安装后无法启动 openSUSE源不完善 manjaro重启就进不去

  2. Java-技术专区-问题专区-应该了解的基础技术点

    Java基础 Arrays.sort实现原理和Collection实现原理 foreach和while的区别(编译之后) 线程池的种类,区别和使用场景 分析线程池的实现原理和线程的调度过程 线程池如何 ...

  3. JSP版本的数据库操作

    代码时间:2015-6-16 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

  4. Python之字符串正则匹配

    需求: 正则表达式匹配某个文本模式,但是它找到的是模式的最长可能匹配(因为是贪婪匹配 ). 而你想修改它变成查找最短的可能匹配. import re text2 = 'Computer says &q ...

  5. 2018-2-13-win10-UWP-Hmac

    title author date CreateTime categories win10 UWP Hmac lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  6. Codeforces 348E 树的中心点的性质 / 树形DP / 点分治

    题意及思路:http://ydc.blog.uoj.ac/blog/12 在求出树的直径的中心后,以它为根,对于除根以外的所有子树,求出子树中的最大深度,以及多个点的最大深度的lca,因为每个点的最长 ...

  7. python 操作redis数据

    python 操作redis 各种类型的数据 # encoding:utf-8 import redis import time def main(): """ redi ...

  8. git常用操作命令归纳

    git开始 全局配置:配置用户名和e-mail地址 $ git config --global user.name"Your Name" $ git config --global ...

  9. Python 调用自己编写的Class

    假设自己写的 class 文件myPets.py放在当前目录的子目录/myClasses下,在myPets.py中定义了一个 class 叫Pet.现在要调用Pet这个 class : from my ...

  10. getElementsBy 系列方法相比querySelector系列的区别

    最近在做的项目中,使用querySelectorAll获取了同class名的元素后,绑定onmouseover事件和onmouseout后,多次在几个元素上移入移出操作时,控制台出现了报错的问题,最后 ...