码迷,mamicode.com
首页 > Web开发 > 详细

html5 input placeholder兼容性处理

时间:2014-10-11 20:15:56      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   java   for   sp   div   

1.HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现;

2.由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问)

1 function hasPlaceholderSupport() {
2   return ‘placeholder‘ in document.createElement(‘input‘);
3 }

3.默认提示文字是灰色的,可以通过CSS来改变文字样式:

 1 /* all */
 2 ::-webkit-input-placeholder { color:#f00; }
 3 input:-moz-placeholder { color:#f00; }
 4  
 5 /* individual: webkit */
 6 #field2::-webkit-input-placeholder { color:#00f; }
 7 #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
 8 #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
 9  
10 /* individual: mozilla */
11 #field2:-moz-placeholder { color:#00f; }
12 #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
13 #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

 

html5 input placeholder兼容性处理

标签:style   blog   color   io   ar   java   for   sp   div   

原文地址:http://www.cnblogs.com/qiangmin/p/4019461.html

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