修改 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 组件