僞類checked

時間 2019-11-07

標籤 checked 简体版

原文原文鏈接

困惑了很久的複選框自定義樣式終於有了謎底，原來就是一個 :checked 僞類 html

他的意思就是匹配任意被勾選/選中的radio（單選按鈕），chexked（複選框），或者option（select項）web

:checked 僞類 用法：app

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

你知道窮人最缺的是什麼嗎？只有愚蠢的人才會說「錢」，窮人最缺的是想成爲有錢人的野心……svg

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。