vue element-ui tab标签页默认样式的修改

vue element-ui tab标签页默认样式的修改

默认蓝色改为桔红色

1. 新加一个style 不要使用scoped。注意要在标签外的父标签起class名，例如我的class名：.homeMain。

<style>
.homeMain .el-tabs__nav-wrap::after {
    height: 1px;
}
.homeMain .el-tabs__item {
    height: 50px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #727171;
}
.homeMain .el-tabs__item:hover{
    color: #C8291C;
}
.homeMain .el-tabs__item.is-active{
    color: #C8291C;
}
.homeMain .el-tabs__active-bar{
  background: #C8291C;
  /* width: 30px; */
}
/* 去掉input激活时的边框 */
.myHead .el-input--mini .el-input__inner {
    border: none ;
}
</style>

2. 新加一个scss 的style ，不要使用scoped。注意要在标签外的父标签起class名，例如我的class名：.homeMain。

<style lang="scss">
.homeMain .el-tabs__nav-wrap::after {
    height: 1px;
}
.homeMain .el-tabs__item {
    height: 50px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #727171;
}
.homeMain .el-tabs__item:hover{
    color: #C8291C;
}
.homeMain .el-tabs__item.is-active{
    color: #C8291C;
}
.homeMain .el-tabs__active-bar{
  background: #C8291C;
  /* width: 30px; */
}
/* 去掉input激活时的边框 */
.myHead .el-input--mini .el-input__inner {
    border: none ;
}
</style>

同理：去掉el-input激活时的边框

.myHead .el-input--mini .el-input__inner {
    border: none ;
}

去掉原生input聚焦时的边框

 <input class="inp" v-model="input" placeholder="请输入" >

.inp:focus{
          outline: none;
        }