[Element Plus] 走马灯指示器样式(颜色)修改简单粗暴 elementplus走马灯样式CSS修改方法

litpt

已于 2024-07-07 02:14:41 修改

阅读量534

点赞数 3

文章标签： css 前端 elementui

于 2024-07-07 02:03:56 首次发布

本文链接：https://blog.csdn.net/litpt/article/details/140238782

版权

方法原理：直接打开Element Plus的.css文件修改

我是从CDN下载到本地引用的，叫这个

不知道你们用npm安装的是不是叫这个。

在.css源码中找到下面这串(别问代码为什么在一行，问就是源码全都在一行)

.el-carousel__indicator.is-active button{opacity:1;background-color:#00ff00}  .el-carousel__button{background-color:#808080;border:none;cursor:pointer;display:block;height:var(--el-carousel-indicator-height);margin:0;opacity:.48;outline:none;padding:0;transition:var(--el-transition-duration);width:var(--el-carousel-indicator-width)}

在代码中我已经修改了2项内容

1、在.el-carousel__indicator.is-active button{opacity:1} 添加了background-color:#00ff00
指示器按钮选中时为绿色

2、.el-carousel__button{background-color:#808080; .....将颜色代码修改为#808080(原本是#ffffff)，指示器按钮未选中时为灰色

效果如图：