2020-05-07

Web前端：修改input标签中placeholder文字颜色

input输入框中有placeholder属性，如果更改input样式的话，placeholder值也需要修改。

运行环境 Runtime environment

操作系统 ： Windows10
IDE: JetBrains WebStorm 2020.2.4 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
VueCli : 3

背景

使用ElementUI开发前端页面时，我感觉input标签不够好看，想加入一些自己样式。

但是更换了input标签背景色以后，导致placeholder属性里的值得字体跟背景色混在一起看清楚了。

所以要改变placeholder值的样式。

placeholder是css3中表单元素input的一个占位符，

适用于高级浏览器或者手机端的输入框的默认提示内容，

通过下面几行代码就可以设置一个兼容的placeholder文字颜色。

全局修改

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/* Firefox 18- */
  color: red;
}
::-moz-placeholder{/* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder {
  color: red;
}

局部修改

推荐使用，然后我展示一下我修改成果

本文以elementUI为例子，如果是自己使用，el-input__inner改成你对应的class名即可

/* 修改input placeholder文字颜色 */
.el-input__inner::-webkit-input-placeholder {
    color: #f5e79e;
}
.el-input__inner:-moz-placeholder {
    color: #f5e79e;
}
.el-input__inner:-ms-input-placeholder {
    color: #f5e79e;
}