下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。

在 HTML5 中新增了许多新特性，其中 placeholder 就是其中之一。placeholder 属性规定可描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于下面的表单 input 类型：text、search、url、tel、email 和 password。IE10、Firefox、Opera、Chrome 和 Safari 支持 placeholder 属性。在支持 placeholder 属性的浏览器中，placeholder 默认显示为灰色，例如下面的示例：

电子邮件

用户名

我们可以通过 CSS 来控制 placeholder 占位文字的样式。各个浏览器厂商都为 placeholder 属性提供了各自版本的伪类控制属性：

::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */

::-moz-placeholder{} /* Firefox版本19+ */

:-moz-placeholder{} /* Firefox版本4-18 */

:-ms-input-placeholder{} /* IE浏览器 */

通过这些伪类，我们就可以修改 placeholder 占位文字的样式。

电子邮件

用户名

生成上面的 placeholder 占位文字样式的 CSS 代码如下：

input[type="email"]::-webkit-input-placeholder {color:#FFF; background:blue;}

input[type="email"]::-moz-placeholder {color:#FFF; background:blue;} /* firefox 19+ */

input[type="email"]:-moz-placeholder {color:#FFF; background:blue;}

input[type="email"]:-ms-input-placeholder {color:#FFF; background:blue;} /* ie */

input[type="text"]::-webkit-input-placeholder {color:green; }

input[type="text"]::-moz-placeholder {color:green;} /* firefox 19+ */

input[type="text"]:-moz-placeholder {color:green;}

input[type="text"]:-ms-input-placeholder {color:green;} /* ie */

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。