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]復選框去掉默認樣式並添加新樣式 Qt 動態添加checkbox,並添加點擊事件 checkbox默認樣式修改 angular JS中使用jquery datatable添加checkbox點擊事件 select去掉默認樣式改變checkbox和radio的默認樣式 css_去掉默認樣式 Input checkbox 添加樣式背景修改radio、checkbox、select默認樣式的方法