如何修改Element-ui中el-Input的placeholder样式

一个普通的input框如果想修改placeholder样式，就可以使用以下的CSS代码：

<style type="text/css">
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: red;
}
    ::-moz-placeholder { /* Firefox 19+ */
    color: red;
}
    :-ms-input-placeholder { /* IE 10+ */
    color: red;
}
    :-moz-placeholder { /* Firefox 18- */
    color: red;
}
</style>

然后在element ui中，我们可以看到el-input 的属性名字是el-input__inner

就可以使用以下的代码：

.el-input__inner {
    &::placeholder {
        color: red;
    }
    &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: red;
    }
    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: red;
    }
    &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: red;
    }
    &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: red;
    }
}

[scode type="yellow"]如果没有指定未sass或scss，那么是不能用 &符号的，此时你就需要改变代码格式为以下格式[/scode]

    .el-input__inner::placeholder {
        color: #fff;
        text-align:center;
    }
     /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
        color: #fff;
        text-align:center;
    }
     /* 火狐 */
   .el-input__inner:-moz-placeholder {
        color: #fff;
        text-align:center;
    }
     /*ie*/
   .el-input__inner:-ms-input-placeholder {
        color: #fff;
        text-align:center;
    }

但是如果是在element-vue中，就需要深度选择器

关于深度选择器参考：elementUi中的el-input去掉border边框

.el-input>>>.el-input__inner::placeholder {
  color: red;
  text-align:center;
}
/* 谷歌 */
.el-input>>>.el-input__inner::-webkit-input-placeholder {
  color: red;
  text-align:center;
}
/* 火狐 */
.el-input>>>.el-input__inner:-moz-placeholder {
  color: red;
  text-align:center;
}
/*ie*/
.el-input>>>.el-input__inner:-ms-input-placeholder {
  color: red;
  text-align:center;
}