本文作者html5tricks，轉載請注明出處

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

這種效果現在網上非常的普遍流行，但大部分是使用JavaScript實現的。但input文本框的標記上添加HTML5規(guī)范里新增的placeholder屬性，然后在屬性值里輸入你需要的提示信息。

語法基本是這個樣子：

HTML代碼

用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+。

總結

以上是生活随笔為你收集整理的html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。