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 @ 2024-06-27 15:29  bingxiaoxiao  阅读(4)  评论(0编辑  收藏  举报