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

本文转载自查看原文 2018-12-13 11:04 1089 css

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css_input[checked]复选框去掉默认样式并添加新样式 css_input[checked]复选框去掉默认样式并添加新样式更改checkbox的默认样式改变checkbox的默认样式更改checkbox的默认样式 checkbox默认样式修改 select去掉默认样式用css改变默认的checkbox样式用css改变默认的checkbox样式改变checkbox和radio的默认样式