其他分享
首页 > 其他分享> > checkbox,radio自定义美化表单

checkbox,radio自定义美化表单

作者：互联网

原理

利用label标签，包裹input的时候，点击label等同于点击input,再用背景图片显示选中和取消选中状态

效果

clipboard.png

clipboard.png

图片

clipboard.png
clipboard.png
clipboard.png
clipboard.png

复选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        input[type='checkbox']{
            display: none;
        }
        label{
            display: inline-block;
        }
        label input[type='checkbox']+span{
            width: 32px;
            height: 32px;
            display: inline-block;
            background: url(images/checkbox.png)no-repeat 0 0 /32px 32px;
        }
        label input[type='checkbox']:checked+span{
            background: url(images/checkbox_checked.png)no-repeat 0 0 /32px 32px;
         }
    </style>
</head>
<body>
<label><input type="checkbox"/><span></span>我</label>
<label><input type="checkbox" checked/><span></span>你</label>
<label><input type="checkbox" checked/><span></span>他</label>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function(){
        $("input[type='checkbox']").change(function(){
            console.log($("input[type='checkbox']:checked").length);
        })
    })
</script>
</body>
</html>

单选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        input[type='radio']{
            display: none;
        }
        label{
            display: inline-block;
        }
        label input[type='radio']+span{
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url(images/radio.png)no-repeat 0 0 /32px 32px;
        }
        label input[type='radio']:checked+span{
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url(images/radio_checked.png)no-repeat 0 0 /32px 32px;
        }
    </style>
</head>
<body>

    <label><input type="radio" name="sex"/><span></span>男</label>
    <label><input checked type="radio" name="sex"/><span></span>女</label>



<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function(){
//        console.log($("input[type='radio']:checked").length);
        $("input[type='radio']").change(function(){
            console.log($("input[type='radio']:checked").length);
        })
    })
</script>
</body>
</html>

标签：checkbox,自定义,32px,radio,input,label,type
来源： https://www.cnblogs.com/baimeishaoxia/p/12050331.html