element ui select 组件下拉滚动条样式优化

鼠标经过变宽

复制代码
::v-deep .el-scrollbar {

  .el-scrollbar__bar{
    width: 6px;
    right: 2px;
    .el-scrollbar__thumb {
      width: 4px;
      border-radius: 4px;
      background-color: #c9cdd4;
      transition: width 300ms;
    }

    &:hover {
      .el-scrollbar__thumb {
        width: 6px;
        border-left: 2px solid transparent;
        border-right: 2px solid transparent;
        border-radius: 6px;
        background-clip: padding-box;
        background-color: #c9cdd4;
      }
    }
  }
  .el-scrollbar__bar.is-horizontal{//水平滚动条设置none
    display: none;
  }
}
复制代码

 

posted @   bingxiaoxiao  阅读(91)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示