困惑了好久的复选框自定义样式终于有了谜底，原来就是一个 :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']{
14px;
height: 14px;
-webkit-appearance: none;
/* 此处一定的去除默认的样式！！！！ */
background: url(./1.svg)no-repeat center;
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 { 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>
你知道穷人最缺的是什么吗？只有愚蠢的人才会说 “钱” ，穷人最缺的是想成为有钱人的野心……