CSS设置⾃定义滚动条样式(兼容IE)话不多说,直接看样式:(亲测 ie浏览器兼容)
.conversion_code{
overflow-x: scroll;
overflow-y: hidden;
width: 152px;
height: 30px;
font-size: 12px;
font-weight: 400;
text-align: center;
line-height: 32px;
letter-spacing: 0;
}
.conversion_code{
/*IE⽆法设置浏览器的宽度、⾼度,只能隐藏,并不影响滑动*/
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-
ms-overflow-style: none;
/*滚动条滑块按钮的颜⾊*/
scrollbar-face-color: #37C5E6;
/*滚动条整体颜⾊*/
scrollbar-highlight-color: #37C5E6;
/*滚动条轨道颜⾊*/
scrollbar-track-color: #42BCEE;
/*三⾓箭头的颜⾊*/
scrollbar-arrow-color: #fff;
/*滚动条阴影*/
scrollbar-shadow-color: #37C5E6;
/
*滚动条3d亮⾊阴影边框的外观颜⾊——左边和上边的阴影⾊*/
scrollbar-3dlight-color:#37C5E6;
/*滚动条3d暗⾊阴影边框的外观颜⾊——右边和下边的阴影⾊*/
scrollbar-darkshadow-color: #37C5E6;css设置表格滚动条
/*滚动条基准颜⾊*/
scrollbar-base-color: #37C5E6;
}
/* -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性滚动条整体部分,可以设置宽度等*/
.conversion_code::-webkit-scrollbar{
background-color: #37C5E6;
width:5px;
height:2px;
}
/*滚动条的轨道*/
.conversion_code::-webkit-scrollbar-track{
background-color: #37C5E6;
border-radius: 10px;
}
/*滚动条的滑块按钮*/
.conversion_code::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #42BCEE;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论