针对谷歌浏览器有效
IE浏览器下的滚动条不能设置宽高、结构,只允许修改颜色,当IE浏览器不能与谷歌滚动条样式调成完全一样时,还是写两种滚动条吧~勉强不来的哦!
html 代码
< div class="ivu-cascader-menu">
css 代码
.ivu-cascader-menu{ max-height:400px; overflow: auto; }
.ivu-cascader-menu::-webkit-scrollbar {/滚动条整体样式/ width: 10px; /高宽分别对应横竖滚动条的尺寸/ height: 1px; }
.ivu-cascader-menu::-webkit-scrollbar-thumb {/滚动条里面小方块/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(193,193,193);
}
.ivu-cascader-menu::-webkit-scrollbar-track {/滚动条里面轨道/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; }
ie 浏览器 *{
/三角箭头的颜色/
scrollbar-arrow-color: #c0c4cc;
/滚动条滑块按钮的颜色/
scrollbar-face-color: #A2A2A3;
/滚动条整体颜色/
scrollbar-highlight-color: #A2A2A3;
/滚动条阴影/
scrollbar-shadow-color: #A2A2A3;
/滚动条轨道颜色/
scrollbar-track-color: #f4f4f5;
/滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色/
scrollbar-3dlight-color:#A2A2A3;
/滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色/
scrollbar-darkshadow-color: #A2A2A3;
/滚动条基准颜色/
scrollbar-base-color: #f4f4f5; }
设置出来结果