使用伪类和伪元素改变radio,checkbox的样式

今天学习了一下百度前端技术学院的课程,感觉很不错

自定义checkbox， radio样式

核心要点

1.不要显示原有样式

2.充分利用伪元素,让伪元素去显示想要的样式

3.伪元素的content为''(空字符串)

4.利用伪类:checked,可大大简化代码,不使用js,即可让伪元素在checked时显示对应的样式

相关知识点也在以上链接中

 

以下附上一个学员的代码,方便拿来主义

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

 

posted @ 2017-11-05 00:08  toDoYourBest  阅读(1121)  评论(0)  编辑  收藏  举报