Vue Element-Ui 改变el-Input背景样式

Element-ui是一个很是好的UI设计模块，它提供给咱们不少好看的按钮样式，很是适用于快速搭建UI，下面说说若是使用了element-ui以后，要更改它默认的el-Input样式应该怎么操做。

使用调试工具找出他的样式默认表，具体操做以下：

 

 

从上图知道默认的样式是.el-input__inner,那下面在改为本身想要的颜色：

<style >
 
.el-input__inner[DangerColor="danger"] {
  background-color: #F56C6C;    //红色
}
 
.el-input__inner[WarningColor="warning"] {
  background-color: #E6A23C;    //橙色
}
 
.el-input__inner[SuccessColor="success"] {
  background-color: #67C23A;    //绿色
}
 
</style>
 在这里特别提醒，若是你修改不成功，那么多是，style标签上加上scoped属性，表示它的样式做用于当下模块，.el-inout__inner是一个全局属性。

    可是，若是你不加scoped属性，你这个页面的style在其余页面就能够直接调用了，因此建议写入统一的全局样式文件中：

 

 

下面继续说说怎么动态改变el-input默认背景颜色:

<!-- 当el-Input输入正常或者是不输入，那么el-Input背景不改变 -->
<el-input v-if="(MyInput==='')||(MyInput==='正常')" size="mini"
v-model="MyInput" readonly/>          
 
<el-input v-else size="mini" WarningColor='warning' v-model="MyInput" readonly/>                     <!--  不然，el-Input背景变成橙色 -->
以上就是动态改变默认el-Input背景色的一种方法。
————————————————