使用僞類和僞元素改變radio,checkbox的樣式

時間 2019-11-17

標籤使用元素改變 radio checkbox 樣式欄目職業生涯简体版

原文原文鏈接

今天學習了一下百度前端技術學院的課程,感受很不錯html

自定義checkbox， radio樣式
前端

核心要點app

1.不要顯示原有樣式學習

2.充分利用僞元素,讓僞元素去顯示想要的樣式url

3.僞元素的content爲''(空字符串)spa

4.利用僞類:checked,可大大簡化代碼,不使用js,便可讓僞元素在checked時顯示對應的樣式code

相關知識點也在以上連接中htm

如下附上一個學員的代碼,方便拿來主義blog

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        input[type=radio]{
            visibility: hidden;
        }
        input[type=radio]:checked::after{
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -59px -10px;
            visibility: visible;
        }
        input[type=radio]::after{
            content: ' ';
            display: block;
            height: 20px;
            width: 20px;
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -24px -10px;
            visibility: visible;
        }
        input[type=checkbox]{
            visibility: hidden;
        }

        input[type=checkbox]:checked::after{
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -60px -31px;
            visibility: visible;
        }
        input[type=checkbox]::after{
            content: '';
            display: block;
            height: 20px;
            width: 20px;
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -25px -32px;
            visibility: visible;
        }

       
    </style>
</head>

<body>
    
    <input type="radio" name="sex" id="male" /><label for="male"> Male</label>
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" checked />
    <br>
         <label for="apple">apple</label><input type="checkbox" name="" value="" id="apple"> <br>
        <input type="checkbox" name="" value="" id="coffee" checked > <label for="coffee">coffee</label><br>
        <input type="checkbox" name="" value="" id="orange"> <label for="orange">orange</label>
        
        <p></p>
</body>

</html>