css 小技巧

01 防止按鈕重複點擊出現藍色

css：
body{
-webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
js：
document.onselectstart=new Function("return false");
複製代碼

02 修改bootstrap-table滾動條樣式

須要先把bootstrap-table.css裏/calculate scrollbar width/註釋下本來的樣式註釋掉 再添加下面的css樣式

/* bootstrap-table 修改滾動條樣式start */
.calcscrollin {
    width: 100%;
    height: 200px;
}
.calcscrollout{   
    top: 0;
    left: 0;    
    width: 200px;
    height: 150px; 
    overflow: scroll;
}
.calcscrollout::-webkit-scrollbar,.fixed-table-body::-webkit-scrollbar{
    width: 3px;/*設置爲0後滾動條不顯示，其實滾動條是存在的*/
    height: 7px;
    background: #009cb8;
}
.calcscrollout::-webkit-scrollbar-track,.fixed-table-body::-webkit-scrollbar-track{
    background: #091629;
    border: 1px solid #009cb8;
    margin-right: 4px;
}
.calcscrollout::-webkit-scrollbar-thumb,.fixed-table-body::-webkit-scrollbar-thumb{
    height: 7px;
    border: 1px solid #009cb8;
    background-color: #091629;
}
/* bootstrap-table 修改滾動條樣式end */
複製代碼

03 css動態設置寬高

.container{
  height: calc(100% - 40px);  //注：減號先後要有空格，不然極可能不生效！！
}
複製代碼

04 修改bootstrap-table 表格內checkbox樣式

input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #e50232;color:#e50232;font-size: 20px;font-weight: bold;}
複製代碼

原文：blog.csdn.net/mx_kui/arti…