这篇文章主要为大家详细介绍了HTML5网页placeholder美化input背景提示文字教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。
今天要给大家介绍的是HTML5网页placeholder美化input背景提示文字。我们大家都知道CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。所以下面下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。如果我们想实现如下的显示效果CSS代码该如何书写呢？
不兜圈子了，下面直接跟随织梦361上代码。
CSS代码
在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同，如下。/*通用*/
::-webkit-input-placeholder{color:#f00;}
::-moz-placeholder{color:#f00;}/*firefox19+*/
:-ms-input-placeholder{color:#f00;}/*ie*/
input:-moz-placeholder{color:#f00;}
/*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;}
/*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;}
虽然本质上只是一句代码，但为了实现范围最广的浏览器支持，加上了各自的浏览器引擎前缀(Vendor Prefix)，一下子变成了10几行代码，哎，这也是没有办法，有了百家浏览器争鸣，就会出现这样的情形。
一些基本的CSS样式你都可以使用在placeholder上——颜色，字体，字体样式等。你可以还可以创造更复杂的样式，比如用GIF动画。
实例演示效果就是上面的图片效果，用了四种美化效果，我使用了autofocus将光标放在了第一个输入框里，但可以在其它输入框里也输入信息。
对于input输入框的背景提示信息(placeholder)的美化虽然只是对网站应用的小小点缀，但正是这样细节上的小差别将你的网站和别人的网站区别开来。IE10也支持了placeholder属性，所以，这是一个可以大范围只是的CSS技巧。
扩展阅读：
感谢打赏，我们会为大家提供更多优质资源！
