织梦侠
WWW.2L3.NET

HTML5网页placeholder美化input背景提示文字教程

这篇文章主要为大家详细介绍了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; } /* 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动画。

实例演示效果就是上面的图片效果,用了四种美化效果,我使用了autofocus将光标放在了第一个输入框里,但可以在其它输入框里也输入信息。

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

  扩展阅读:

《15种jQuery表单placeholder占位符动画插件效果》

《dedecms织梦信息提示框美化代码》

《title美化效果 Bootstrap提示工具(Tooltip)插件》

转载请注明文章来自织梦侠[秩名]作者的-HTML5网页placeholder美化input背景提示文字教程
联系作者
取消
这个作者很懒什么也没留下!
打赏作者
取消

本文作者无偿奉献,就打赏给我们织梦侠吧!

扫码支付
扫码打赏,建议金额1-10元

打开支付宝扫一扫,即可进行扫码打赏哦

提醒:打赏金额将直接进入对方账号,无法退款,请您谨慎操作。