el-table__body-wrapper &::-webkit-scrollbar修改滚动条颜色
时间: 2023-10-18 09:08:13 浏览: 55
你可以使用以下 CSS 代码来修改 el-table__body-wrapper 中的滚动条颜色:
```css
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 4px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 4px;
}
```
上述代码将会让滚动条变宽,并且设置了一个灰色的滚动条拇指,同时设置了一个淡灰色的滚动条轨道。你可以根据需要修改颜色和其他属性。请注意,这些样式只会在支持 WebKit 引擎的浏览器中有效,在其他浏览器中可能会有所不同。
相关问题
el-table的滚动条样式修改
要修改el-table的滚动条样式,可以使用以下CSS代码:
```
/* 水平滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #c1c1c1;
}
/* 垂直滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #c1c1c1;
}
```
将以上代码添加到你的样式文件中即可。你可以根据自己的需要修改颜色和其他样式。
.el-table滚动条样式
对于.el-table滚动条样式的修改,可以通过修改相关的CSS样式来实现。引用提供了一种修改表格滚动条样式的方法,通过设置.el-table__body-wrapper::-webkit-scrollbar的宽度和高度来改变滚动条的大小。例如,可以使用以下代码来将滚动条的宽度设置为10像素和高度设置为10像素:
```css.el-table__body-wrapper::-webkit-scrollbar {
width:10px;
height:10px;
}
```
引用还提供了一种修改滚动条滑块样式的方法,可以通过设置.el-table__body-wrapper::-webkit-scrollbar-thumb的背景颜色和边框半径来改变滑块的样式。例如,可以使用以下代码将滑块的背景颜色设置为#ddd,边框半径设置为3像素:
```css.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius:3px;
}
```
如果需要同时修改.el-table__body-wrapper和.el-scrollbar__wrap的滚动条样式,可以参考引用中的方法,将它们的选择器合并,然后设置相应的滚动条样式。例如:
```css.el-table__body-wrapper, .el-scrollbar__wrap {
&::-webkit-scrollbar {
width:10px;
height:10px;
}
}
```
通过这些方法,你可以根据自己的需求来修改.el-table的滚动条样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)