input 纯CSS 自定义单选框/多选框样式

太过爱你忘了你带给我的痛 2022-05-10 15:44 532阅读 0赞

备忘，直接上代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式</title>
        <style>
            #d1{
                width:200px;
                margin: 100px auto;
            }
            label{
                position: relative;
                display: inline-block;
                width: 48%;
            }
            .inputStatus{
                position: absolute;
                top:0;
                left: 0;
                width: 22px;
                height: 15px;
                opacity: 0;
            }
    
            .inputStyle2{
                position: relative;
                top: 3px;
                left: 0;
                display: inline-block;
                padding: 10px;
                /*多选*/
                background: url("img/allBgs.png") no-repeat -3px -2px;
                /*单选*/
                /*background: url("img/allBgs.png") no-repeat -52px -2px;*/
            }
    
            .inputStatus:checked+.inputStyle2{
                /*多选*/
                background: url("img/allBgs.png") no-repeat -28px -2px;
                /*单选*/
                /*background: url("img/allBgs.png") no-repeat -75px -2px;*/
            }
    
        </style>
    </head>
    <body>
    
    <div  id="d1">
        <label class='' style="position: relative;">
            <input type='radio'  id="history_finish0" class='inputStatus' name="v1">
            <span class='inputStyle2'></span> 确定
        </label>
    
        <label class='labelRadio' style="margin-bottom: 0;">
            <input type='radio' class='inputStatus' name="v1">
            <span class='inputStyle2'></span> 取消
        </label>
    </div>
    
    </body>
    </html>

效果图：  
![在这里插入图片描述][70]

--------------------

![在这里插入图片描述][70 1]

--------------------

素材背景图：  
![在这里插入图片描述][70 2]

[70]: /images/20220505/b6ad02bf87c34b9d970d00aab02121ac.png
[70 1]: /images/20220505/3d89f26cc2dc447cadcbd22762c1bc4c.png
[70 2]: /images/20220505/357ffef744a14bf4a8fac2f37c93aea8.png