html背景属性代码自学,使用HTML5的Placeholder属性实现input输入框背景文字提示效果...

我们首先看看什么是input输入框背景文字提示效果&＃xff1a;

这种效果现在网上非常的普遍流行&＃xff0c;但大部分是使用Javascript实现的。但HTML5给我们提供了新的纯HTML的实现方式&＃xff0c;不需要任何的Javascript&＃xff0c;只需要在你的input文本框的标记上添加HTML5规范里新增的

语法基本是这个样子&＃xff1a;

HTML代码

用CSS美化Placeholder提示信息的样式

CSS3里有相应的通用的对Placeholder提示信息美化的方法。你可以设置提示信息文字的颜色&＃xff0c;透明度&＃xff0c;背景色等。

为了最大化的兼容所有浏览器&＃xff0c;给CSS里的placeholder属性添加浏览器引擎前缀还是有必要的。

– 谷歌浏览器(Webkit): ::-webkit-input-placeholder pseudo-element;

– IE10: :-ms-input-placeholder pseudo-class;

– 火狐浏览器(Gecko18-): :-moz-placeholder pseudo-class;

– 火狐浏览器(Gecko19&＃43;): ::-moz-placeholder pseudo-element;

– Opera(Presto): 无。

/* WebKit browsers */

::-webkit-input-placeholder {

color: #777;

}

/* Mozilla Firefox 4 to 18 */

:-moz-placeholder {

color: #777;

opacity: 1;

}

/* Mozilla Firefox 19&＃43; */

::-moz-placeholder {

color: #777;

opacity: 1;

}

/* Internet Explorer 10&＃43; */

:-ms-input-placeholder {

color: #777;

}

对Placeholder的浏览器支持情况

各种浏览器对HTML5/CSS3里出现的新特征、新属性的支持是逐步提高的&＃xff0c;最终所有的浏览器都会完全支持HTML5/CSS3&＃xff0c;这是毫无疑问的。目前&＃xff0c;对HTML5的placeholder属性支持的浏览器有谷歌浏览器、火狐浏览器、Safari、Opera&＃xff0c;还有IE10&＃43;。