elementui的el-tabs标签页样式修改

一、官网样式:

二、修改样式

1.去掉下划线

效果:
代码:
css 复制代码
/* 去掉tabs标签栏下的下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
  /* background-color: #fff; */
}

2.改变下划线颜色

效果:

代码:
css 复制代码
/* 下划线切换高亮 */
::v-deep .el-tabs__active-bar {
  background-color: #30fdff;
}

3.改变选中文字/鼠标滑过时文字颜色

效果:
代码:
css 复制代码
/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: #30fdff;
  opacity: 1;
}
/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: #30fdff;
  cursor: pointer;
  opacity: 1;
}

4.设置未选中时文字颜色

效果:
代码:
css 复制代码
::v-deep .el-tabs__item {
  color: #e6f1f1;
  opacity: 0.5;
}
相关推荐
蓝倾4 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong9 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹11 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982411 分钟前
vue3源码解析:依赖收集
前端·vue.js
用户75794199497011 分钟前
基于JavaScript的简易Git
javascript
WaiterL12 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason14 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77815 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽34 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟34 分钟前
让对象保持定义的顺序来排列
前端