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

小呆i2023-08-29 8:56

一、官网样式：

二、修改样式

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;
}