CSS
CheckBox默认样式改写
input[type="checkbox"] {
-webkit-appearance: none;
/*清除复选框默认样式*/
background: #fff url("../img/checkbox-blank-outline.png") no-repeat;
/*复选框的背景图,就是上图*/
width: 15px;
height: 15px;
vertical-align: middle;
outline: none;
margin-top: -4px;
/* border: 1px solid #1e7abd; */
/*去掉自带的边框*/
}
input[type="checkbox"]:checked {
-webkit-appearance: none;
/*清除复选框默认样式*/
background: url("../img/checkbox-marked-outline.png") no-repeat;
width: 15px;
height: 15px;
vertical-align: middle;
outline: none;
}
input[type="checkbox"]:focus {
outline: none;
}
复制代码
效果图:
修改浏览器默认滚动条样式(针对chrome)
/*滚动条样式*/
div::-webkit-scrollbar {
/*滚动条整体样式*/
width: 7px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 7px;
}
div::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
div::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
复制代码