Html各控件样式整理

滚动条样式 
.scrollBarStyle {
    overflow-y: auto;
    height: 400px;
    background: white;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 2px;
    margin-top: 3px;
    padding-left: 5px;
}

.scrollBarStyle::-webkit-scrollbar { /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 25px;
}

.scrollBarStyle::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px #D4D4D4;
    background: #D4D4D4;
}

.scrollBarStyle::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 0 #0A5EC6;
    background: #0A5EC6;
}

 

复选框样式：

　/*隐藏掉我们模型的checkbox*/
.checkSelect .input_checkSelect {
                appearance: none;
                -webkit-appearance: none;
                outline: none;
                display: none;
            }
    /*未选中时*/        
.checkSelect .input_checkSelect+span {
                width: 25px;
                height: 25px;
                display: inline-block;
                background: url(../images/ic_unchecked.png) no-repeat;
                background-size: 100% 100%;
            }
   /*选中checkbox时,修改背景图片的位置*/            
.checkSelect .input_checkSelect:checked+span {
                background: url(../images/ic_checked.png) no-repeat;
                background-size: 100% 100%;
            }

 

 

<label class="checkSelect">
           <input id="inputAirNumber1" class="input_checkSelect" type="checkbox" style="display: none" />
           <span></span>
</label>

div grid样式

.top_chart {
  width:100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 1px;
}