HTML5 placeholder美化input背景提示文字

概述CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输

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

CSS3 里提供了专门的规则属性来美化用 placeholder 实现的 input 输入框的背景提示信息。下面我们来看看如何用专用的 CSS 属性来美化具有 placeholder 属性的 input 输入框。

CSS 代码

在火狐浏览器中的写法和在谷歌浏览器和 Safari 里的写法有些不同，但相信以后会统一。

/* 通用 */

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

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

:-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 动画。

实例演示

下面都是 input 输入框，用了四种美化效果，我使用了 autofocus 将光标放在了第一个输入框里，但可以在其它输入框里也输入信息，看看效果：

对于 input 输入框的背景提示信息(placeholder)的美化虽然只是对网站应用的小小点缀，但正是这样细节上的小差别将你的网站和别人的网站区别开来。IE10 也支持了 placeholder 属性，所以，这是一个可以大范围只是的 CSS 技巧。

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

总结

以上是内存溢出为你收集整理的HTML5 placeholder美化input背景提示文字全部内容，希望文章能够帮你解决HTML5 placeholder美化input背景提示文字所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。