改变el-tabs下划线颜色，文字颜色，选择颜色

最新推荐文章于 2024-07-09 21:59:24 发布

浅丶忆灬

最新推荐文章于 2024-07-09 21:59:24 发布

阅读量587

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/hqianyi/article/details/136841981

版权

本文介绍了如何修改ElemeUI(El-tabs)中的文字颜色、下划线颜色以及选中状态下的样式，包括背景色和字体设置。

摘要由CSDN通过智能技术生成

// 改变文字颜色和下划线距离
    /deep/ .el-tabs__item{
        font-weight: 500;
        font-size: 24px;
        color: #06EBFC;
        padding-bottom: 20px;
        margin-top: 10px;
    }
    // 改变下划线背景色
    /deep/ .el-tabs__nav-wrap::after{
        background-color: #0C314D;
    }
    // 改变选择后的文字颜色
    // /deep/ .el-tabs__item.is-active {
    //     // color: red;//选中的文字颜色
    //     // opacity: 1;
    // }
    //改变选择的下划线颜色 
    /* 下划线颜色 */
    /deep/ .el-tabs__active-bar {
        background-color: #07D0E3;
    }