修改 el-input 内部样式

在工作中有时候需要单独设置某个 el-input 组件的内部样式,比如 字体颜色、背景色、宽度、高度等,这时就需要修改 el-input 组件的内部自带样式,修改方式如下:

修改前:

el-input 独占满一整行

修改后:

模板代码

<div class="elinput">
    <el-input v-model="elinputValue" placeholder="ABC" size="normal" class="input-demo"></el-input>
</div>

data 数据

data() {
    return {
      elinputValue: ''
    }
}

样式代码

<style  lang="scss" scoped>
.elinput {
  height: 50px;
  background: pink;
  display: flex;
  align-items: center;
  .input-demo {
    width: 180px;
    /deep/ .el-input__inner {
      text-align: center; // 字体居中
      height: 35px; // 高度
      line-height: 35px; // 高度
      background: #c5c5c5; // 背景色
      border: 2px solid blue; // 边框宽度 实线 颜色
      border-radius: 15px; // 边角-圆角半径
      color: green; // 内容字体颜色
    }
    /deep/ .el-input__inner::placeholder {
      color: red; // 提示字体颜色
    }
  }
}
</style>

总结:

  1. 通过 /deep/ .el-input__inner 修改内部样式
  2. 通过给 el-input 组件加 class 属性,然后在class 属性内修改,防止修改到其他 el-input 组件

热门相关:睡服BOSS:老公,躺下!   染指帝国首席:老公,别闹   百炼成仙   甜妻动人,霸道总裁好情深   睡服BOSS:老公,躺下!