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; }