el-input 修改滚动条样式
时间: 2023-10-30 22:03:17 浏览: 259
Vue的el-scrollbar实现自定义滚动
要修改el-input的滚动条样式,你可以按照以下步骤进行操作:
1. 在样式文件中给el-input的class类加上自定义样式。你可以使用以下代码:
```
.el-textarea__inner::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.el-textarea__inner::-webkit-scrollbar-thumb {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #c3c3c3;
}
.el-textarea__inner::-webkit-scrollbar-track {
background-color: transparent;
}
```
这段代码会给el-input的滚动条添加样式,包括滚动条的宽度、高度和颜色等。
2. 在你的Vue组件中,给el-input添加自定义class类。比如,你可以给el-input添加class类名为"custom-scrollbar":
```
<el-input class="custom-scrollbar"></el-input>
```
这样,el-input就会应用你自定义的滚动条样式。
通过以上步骤,你就可以成功修改el-input的滚动条样式。请根据你的需求调整自定义样式代码中的属性值以达到你想要的效果。
阅读全文