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

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30469895

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1k

点赞数

文章标签： javascript java 移动开发 ViewUI

原文链接：http://www.cnblogs.com/fanting/p/10112838.html

版权

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

转载于:https://www.cnblogs.com/fanting/p/10112838.html

优惠劵

weixin_30469895

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
checkbox去掉默认样式添加新样式及点击事件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>checkbox样式</title> </head> <style> .rember...
复制链接

扫一扫