checkbox去掉默认样式添加新样式及点击事件

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>checkbox样式</title>
    </head>
    <style>
        .remberpass input,
        .remberpass span {
            float: left;
        }
        /* 将浏览器默认的checkbox样式重置 */
        
        input[type=checkbox] {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            background-color: white;
            border: 1px solid #5692fc;
            border-radius: 3px;
        }
        
        input[type=checkbox]:checked {
            background: red;/*可加背景图片*/
            background-repeat: no-repeat;
        }
    </style>

    <body>
        <div class="remberpass">
            <input class="test" type="checkbox" />
            <span>记住密码</span>
        </div>
    </body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script>
    $(".test").click(function(){
        if($("input[type='checkbox']").prop('checked')){
            alert("选中");
        }else{
            alert("未选中")
        }
    })
        
</script>

 

posted @ 2018-12-13 11:04  小凢  阅读(2724)  评论(0)    收藏  举报