如何修改Placeholder(占位符) 的样式

Placeholder(占位符) 用来对可输入字段的期望值提供提示信息，目前已经得到主流浏览器的广泛支持。这个属性适用于 <textarea>多行文本框和 type属性值为 text, password, search, tel, url 或者 email 等的 <input>。使用方式非常简单：

<input id="name" name="name" placeholder="请输入用户名" type="text">

通常我们给input定义的样式是针对输入框里的输入值的，而针对这个提示信息的样式如何修改呢？

css3本来提供了一个::placeholder伪类选择器

input::placeholder {
    color: #999;
}

但目前支持它的浏览器很少，所以需要根据不同的浏览器进行不同的定义

input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: green;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: green;
}
input:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */
  color: green;
}

如果需要兼容老版本的 Firefox 浏览器，还需要添加下面这种只有一个冒号的样式规则：

input:-moz-placeholder { /* Firefox 4 - 18 */
  color: green;
}

从 Firefox 19 开始一个冒号的伪类定义方式 :-moz-placeholder 被废弃了，升级为两个冒号的伪元素定义方式，不仅如此，还添加了一个默认的 opacity: 0.54 不透明度样式。根据不同的需求可以覆盖掉该样式，否则文字是半透明的：

input::-moz-placeholder {
  color: green;
  opacity: 1;
}

完整地修改placeholder的样式如下：

input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: green;
}
input:-moz-placeholder { /* Firefox 4 - 18 */
  color: green;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: green;
  opacity: 1;
}
input:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */
  color: green;
}

以上同样适用于textarea:...

Tips:

以上代码不能如下连起来写噢

::-webkit-input-placeholder,::-moz-placeholder {
  color: green;}

这样写会被某个浏览器不识别其中一个或多个选择器，而造成整个css样式失效！

介绍一下其它平台对placeholder是如何修改其样式的

• 微信小程序placeholder样式

input::-webkit-input-placeholder {
    color: #999;
}
input::-moz-placeholder {
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}

• Element UI

::v-deep {
    .el-input__inner {
       &::placeholder {
          color: green;
       }
    }
}