1. 程式人生 > >bootstrap table 自定義checkbox樣式

bootstrap table 自定義checkbox樣式

this inline move for padding col 表格 poi app

//css

<style>
        .checkbox-custom {
            position: relative;
            padding: 0 15px 0 25px;
            margin-bottom: 7px;
            margin-top: 0;
            display: inline-block;
        }
        /*
        將初始的checkbox的樣式改變
        */
        .checkbox-custom input[type="checkbox"] 
{ opacity: 0;/*將初始的checkbox隱藏起來*/ position: absolute; cursor: pointer; z-index: 2; margin: -6px 0 0 0; top: 50%; left: 3px; } /* 設計新的checkbox,位置 */ .checkbox-custom label:before
{ content: ‘‘; position: absolute; top: 50%; left: 0; margin-top: -9px; width: 19px; height: 18px; display: inline-block; border-radius: 2px; border: 1px solid #bbb; background
: #fff; } /* 點擊初始的checkbox,將新的checkbox關聯起來 */ .checkbox-custom input[type="checkbox"]:checked +label:after { position: absolute; display: inline-block; font-family: ‘Glyphicons Halflings‘; content: "\e013"; top: 42%; left: 3px; margin-top: -5px; font-size: 11px; line-height: 1; width: 16px; height: 16px; color: #333; } .checkbox-custom label { cursor: pointer; line-height: 1.2; font-weight: normal;/*改變了rememberme的字體*/ margin-bottom: 0; text-align: left; } </style>

//js

//在表格體渲染完成,並在 DOM 中可見後觸發 替換checkbox樣式
    $("#bootstrap-table").on(‘post-body.bs.table‘,function(data){
        $(this).find("input:checkbox").each(function (i) {
            var $check = $(this);
            if ($check.attr("id") && $check.next("label")) {
                return;
            }
            $check.next().remove();
            var name = $check.attr("name");
            var id = name + "-" + i;
            var $label = $(‘<label for="‘+ id +‘"></label>‘);
            $check.attr("id", id).parent().addClass("checkbox-custom").append($label);
        });
    });

bootstrap table 自定義checkbox樣式