HTML5 Placeholder實現input背景文字提示效果

這篇文章我們來看看什麼是input輸入框背景文字提示效果，如下圖所示：

這種效果現在網上非常的普遍流行，但大部分是使用JavaScript實現的。但HTML5給我們提供了新的純HTML的實現方式，不需要任何的JavaScript，只需要在你的input文本框的標記上添加HTML5規範裏新增的placeholder屬性，然後在屬性值裏輸入你需要的提示信息。

語法基本是這個樣子：<input placeholder=”提示信息...”>

HTML代碼

<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密碼..." name="pass">
<input type="submit" value="提交">
</form>

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

CSS3裏有相應的通用的對Placeholder提示信息美化的方法。你可以設置提示信息文字的顏色，透明度，背景色等。

爲了最大化的兼容所有瀏覽器，給CSS裏的placeholder屬性添加瀏覽器引擎前綴還是有必要的。

- 谷歌瀏覽器(Webkit): ::-webkit-input-placeholder pseudo-element;

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

- 火狐瀏覽器(Gecko18-): :-moz-placeholder pseudo-class;

- 火狐瀏覽器(Gecko19+): ::-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+ */
::-moz-placeholder {
	color: #777;
	opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
	color: #777;
}

對Placeholder的瀏覽器支持情況

各種瀏覽器對HTML5/CSS3裏出現的新特徵、新屬性的支持是逐步提高的，最終所有的瀏覽器都會完全支持HTML5/CSS3，這是毫無疑問的。目前，對HTML5的placeholder屬性支持的瀏覽器有谷歌瀏覽器、火狐瀏覽器、Safari、Opera，還有IE10+。