checkbox,radio自定义美化表单

最新推荐文章于 2021-06-09 10:21:37 发布

weixin_34319999

最新推荐文章于 2021-06-09 10:21:37 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012956541

本文介绍了一种使用CSS实现自定义样式的复选框与单选按钮的方法，通过隐藏默认的input元素并用背景图片展示选中状态，增强了网页表单的美观性和用户体验。

原理

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

效果

图片

复选

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