element ui之修改样式Tabs 标签页-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui之修改样式Tabs 标签页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

●选项卡样式

原图:

el-tabs 标签样式怎么改,element,ui,vue.js,javascript ●选项卡整个边(四边)

<style>
/*未选中时字体颜色*/
.el-tabs__item{
  color: #FFFFFF;
}
/*选项卡整个边框*/
.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: 1px solid #3c4249;
}
/*选中时底部边颜色*/
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  border-bottom: 1px solid #3275f9;
}
/*选中时字体颜色*/
.el-tabs__item.is-active{
  color: #3275f9;
}
</style>

el-tabs 标签样式怎么改,element,ui,vue.js,javascript

/**
修改底部最长的边颜色
 */
.el-tabs--card>.el-tabs__header{
    border-bottom: 1px solid #2F3A57 !important;
    //border-bottom: 0 !important;
}

/**
修改侧边标签项竖线颜色
 */
.el-tabs--card>.el-tabs__header .el-tabs__item{
    border-left: 1px solid #2F3A57 !important;
    //border-bottom: none !important;
    background: rgba(255,255,255,0.05) !important;
}

●基础的、简洁的标签页

原图：

el-tabs 标签样式怎么改,element,ui,vue.js,javascript

改变底部最显眼的白边

<style>
/*改变底部最显眼的白色粗犷滴边*/
.el-tabs__nav-wrap::after{
  background-color: #0b131b;
}
</style>

el-tabs 标签样式怎么改,element,ui,vue.js,javascript

最后效果

<style>
/*改变底部最显眼的白色粗犷滴边*/
.el-tabs__nav-wrap::after{
  background-color: #0b131b;
}
/*未选中时字体颜色*/
.el-tabs__item{
  color: #FFFFFF;
}
/*选中时底部边颜色*/
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  border-bottom: 1px solid #3275f9;
}
/*选中时字体颜色*/
.el-tabs__item.is-active{
  color: #3275f9;
}
.el-tabs__active-bar{
  background-color: #3275f9;
}
</style>

el-tabs 标签样式怎么改,element,ui,vue.js,javascript 文章来源地址https://www.toymoban.com/news/detail-788709.html