自定义checkbox， radio样式

自定义checkbox， radio样式

2种方式可以实现 1、使用背景图实现 2、伪元素实现

一、使用背景图实现（雪碧图）

//css
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;
        }

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

实现效果：

Paste_Image.png

HTML <label>用法
HTML <label>元素它通常关联一个控件，使用 label "for" 属性 bind input "id"，如：
<label for="username">Click me</label>
<input type="text" id="username">