之前在介绍HTML5的placeholder属性时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看。
CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。
其实只是一句代码，但为了实现范围最广的浏览器支持，加上了各自的浏览器引擎前缀(Vendor Prefix)，一下子变成了10几行代码，希望这种情况会尽快的过去。
一些基本的CSS样式你都可以使用在placeholder上——颜色，字体，字体样式等。你可以还可以创造更复杂的样式，比如用GIF动画。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> ::-webkit-input-placeholder {color:#7ad3fb; font-family: "楷体";}/*WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 */ :-moz-placeholder {color:#7ad3fb; font-family: "楷体";}/*Mozilla Firefox 4-18使用伪类 */ ::-moz-placeholder {color:#7ad3fb; font-family: "楷体";}/*Mozilla Firefox 19使用伪类 */ :-ms-input-placeholder {color:#7ad3fb; font-family: "楷体";}/*IE10使用伪类 */ </style> </head> <body> <input type="text" placeholder="请输入数字" /> </body> </html>
参考：http://www.webhek.com/html5-placeholder-css/