修改element-ui滚动条样式

//滚动条的宽度

.your-table .el-table__body-wrapper::-webkit-scrollbar {

width: 10px;

height: 10px;

}

//滚动条的滑块

.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {

background-color: #a1a3a9;

border-radius: 3px;

}

如果是整个页面的滚动条风格是一致的,直接改全局的滚动条样式也可以有效果

//滚动条的宽度

::-webkit-scrollbar {

width: 10px;

height: 10px;

}

//滚动条的滑块

::-webkit-scrollbar-thumb {

background-color: #a1a3a9;

border-radius: 3px;

}

滚动条样式存在兼容性问题,以上的样式是在webkit浏览器下可生效的

原文地址:https://www.cnblogs.com/GraceYang/p/12672328.html

时间: 2024-10-14 07:56:30

修改element-ui滚动条样式的相关文章

修改element ui 默认样式最好的解释

KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的局部css 就是在你当前组件里的所有html标签打一个data-tag 例如 然后会把你scoped里的css编译为 xxx[ data-v-4d856c52] 知道了scoped的作用,来看看为什么我们不能修改el-table里的样式 如果你修改样式你一定会这么写css .table th {xx

覆盖element ui 的样式

我们可以使用 !important  来覆盖element ui 的样式 首先先在浏览器中找到 我们所要修改的样式 ,然后找到她的 class  重新写他的样式 ,例如 . app  { width :10ox ! important ; } 注意 :本来element  ui 默认的width 为5px 我们要覆盖他的样式,就在要修改的 width 后面加上    ! important 原文地址:https://www.cnblogs.com/guangzhou11/p/9710497.ht

vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是想要修改还是有方法的: 1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式. 2. 如果项目用到了预处理器,可以通过vue-loader提供的新写法 vue-loader 写法如下: <style scoped> .a >>> .b { /

关于element ui滚动条使用

element ui 自带的滚动条使用 在容器的直接外层添加 (需要展现滚动条的那一级) <el-scrollbar style="height:100%"></el-scrollbar> 如果 注意添加样式  height:100% 另外添加全局的样式 body .el-scrollbar__wrap { overflow-x: hidden; } 原文地址:https://www.cnblogs.com/pengfei25/p/11708082.html

如何修改浏览器默认滚动条样式

/*浏览器滚动条样式*/ /* width */ ::-webkit-scrollbar { width: 4px; height: 4px; } /* Track */ ::-webkit-scrollbar-track { background: rgb(255, 255, 255); border-radius: 8px; } /* Handle */ ::-webkit-scrollbar-thumb { background: rgb(201, 201, 202); border-ra

vue 修改element ui 的默认样式

应该还能针对其他的奇葩样式修改的 比如:mint-ui,vux 应该都适用 1.在样式  后加 !important ,例如:width: 178px !important; 2.<style scope>  </style> 中的scope去掉 3.vue有一个默认的<style scope>  </style>标签,这是后重新新建一个<style>  </style>的标签.区分开来,就是使用两个<style>  &l

element ui 修改默认样式

修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el-form-item__label{ //你要修改的CSS属性 } </style> 但是如果已经在全局内修改了默认样式,但又想在某一个标签内再次重写样式,则可以给要修改的标签加一个父类,在父类里重写样式,这样可以避免代码污染,也可以叫做局部修改 <el-form-item class=&q

chorme和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q

修改浏览器滚动条样式

滚动条样式修改,没有找到修改火狐浏览器滚动条的代码 把以下样式加入css,图片为谷歌.safari.qq浏览器.360浏览器滚动条样式和ie滚动条样式及ie原始默认样式 /*谷歌.safari.qq浏览器.360浏览器滚动条样式*/ /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-web

Element UI 中被隐藏的滚动条

Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中. 使用的时候,放在 <el-scrollbar></el-scrollbar> 标签内即可如: <div style="height:100%"> <el-scrollbar class="m-scroll" style="height:100%">