checkbox,radio自定义美化表单

2019年9月8日 107次阅读 来源: 渣渣辉

原理

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

效果

《checkbox,radio自定义美化表单》

《checkbox,radio自定义美化表单》

图片

《checkbox,radio自定义美化表单》
《checkbox,radio自定义美化表单》
《checkbox,radio自定义美化表单》
《checkbox,radio自定义美化表单》

复选

<!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>
    原文作者：渣渣辉
    原文地址: https://segmentfault.com/a/1190000012956541
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞