html中输入框占位符,HTML5 input Placeholder（占位符）样式

placeholder 属性

placeholder(占位符)在实际的应用中非常常见，主要用作提示输入内容，现代浏览器都支持：

placeholder 样式

这里网上搜索了一下 placeholder 样式相关知识，分享一下：/* all */

::-webkit-input-placeholder { color:#f00; }

::-moz-placeholder { color:#f00; } /* firefox 19+ */

:-ms-input-placeholder { color:#f00; } /* ie */

input:-moz-placeholder { color:#f00; }

/* individual: webkit */

#field2::-webkit-input-placeholder { color:#00f; }

#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */

#field2::-moz-placeholder { color:#00f; }

#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

你可以控制placeholder文字的字体、颜色和风格。你甚至可以将文本框的placeholder以动画方式显示。

美化你的文本框都是些看起来很小的事情，但对于一些交互式的网站来说，成功的关键就在于细节。现在IE10里也只支持placeholder了，相信越来

越多的人会使用这种原生的placeholder效果。