技術標籤：經驗

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