码迷,mamicode.com
首页 > 其他好文 > 详细

input的placeholder美化

时间:2017-06-24 18:44:53      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:bsp   样式   text   put   前缀   end   cas   输入   浏览器   

总所周知html5为input提供了 placeholder的属性,它现在在我们做项目中已经不可或缺,但是input(文本框)里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看,CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。通过下面代码实现

 

/* 通用 */
::-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几行代码,希望这种情况会尽快的过去。

input的placeholder美化

标签:bsp   样式   text   put   前缀   end   cas   输入   浏览器   

原文地址:http://www.cnblogs.com/qieban/p/7073953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!