如何修改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

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

就可以使用以下的代码:

.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;
}
版权声明:
作者:北忘山
文章:如何修改Element-ui中el-Input的placeholder样式
链接:https://www.beiwangshan.com/archives/282.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>