伪类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>

你知道穷人最缺的是什么吗？只有愚蠢的人才会说 “钱” ，穷人最缺的是想成为有钱人的野心……

猜你喜欢