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

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

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

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

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

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

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

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

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

Tips:

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

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

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

• 微信小程序placeholder样式

• Element UI