修改<el-input type="textarea"/>滚动条样式

小鹦鹉的采坑日记其一

事情起因

项目中一个弹出层用到了Element-UI中el-input的textarea,但滚动条太丑了.
当textarea内容超出设置的文本高度时会出现滚动条,然鹅默认滚动条实在太丑,于是准备换掉它.

默认滚动条:

期望:

总结 :

因为el-input中的textarea内置的是html标签,所以无法使用el-scrollbar组件来替换滚动条,所以只能对其样式进行修改,下面的样式代码是来自同事的帮助^ ^.

(ps:红圈的位置有点小瑕疵,初步分析为添加了滚动条节点,导致右上角和右下角组件的部分被遮住,可以进一步调整样式解决)

      .el-textarea {
        /*滚动条整体部分*/
        .el-textarea__inner::-webkit-scrollbar {
          width: 7px;
          height: 7px;
        }
        /*滚动条的轨道*/
        .el-textarea__inner::-webkit-scrollbar-track {
          background-color: #ffffff;
        }
        /*滚动条里面的小方块，能向上向下移动*/
        .el-textarea__inner::-webkit-scrollbar-thumb {
          background-color: rgba(144, 147, 153, 0.3);
          border-radius: 5px;
          border: 1px solid #f1f1f1;
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        }
        .el-textarea__inner::-webkit-scrollbar-thumb:hover {
          background-color: rgba(144, 147, 153, 0.3);
        }
        .el-textarea__inner::-webkit-scrollbar-thumb:active {
          background-color: rgba(144, 147, 153, 0.3);
        }
        /*边角，即两个滚动条的交汇处*/
        .el-textarea__inner::-webkit-scrollbar-corner {
          background-color: #ffffff;
        }
      }