滚动条样式
.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;
}