placeholder 是HTML5 中新增的一個屬性。placeholder可以用來描述輸入字段預(yù)期值的簡短的提示信息。提示信息會在用戶輸入值之前顯示，一旦用戶輸入信息該提示就會自動消失。比如：我們在登錄時需要輸入用戶名和密碼，它會提示你什么地方輸入用戶名，什么地方輸入密碼，這個就是使用的placeholder屬性。

注意：placeholder 屬性適用于下面的 input 類型：text、search、url、tel、email 和 password。

一、placeholder屬性怎么用

語法： placeholder="你想要提示的內(nèi)容"

可以直接在需要提示的input輸入框中加上placeholder屬性，比如：<input type="text" name="name" placeholder="請輸入用戶嗎">

<input type="text" id="input" placeholder="請輸入用戶名" />

效果圖：

如圖所示，input輸入框里面提示用戶輸入用戶名

二、placeholder屬性修改

當(dāng)placeholder屬性默認(rèn)的顏色，樣式等不能滿足我們的需要時，需要修改它的樣式。

寫法：input::-webkit-input-placeholder{你想要修改的樣式}

因為placeholder是 HTML5 中新增加的屬性，需要注意瀏覽器的兼容性。

::-webkit-input-placeholder{} /* 使用webkit內(nèi)核的瀏覽器 */

:-moz-placeholder{} /* Firefox版本4-18 */

::-moz-placeholder{} /* Firefox版本19+ */

:-ms-input-placeholder{} /* IE瀏覽器 */

舉例：修改placeholder樣式，將input提示框中文字的顏色設(shè)為紅色，字體設(shè)為20px，讓文字在輸入框中水平居中顯示。代碼如下

HTML部分：

<input type="text" id="input" placeholder="請輸入用戶名" />

CSS部分：

input{width: 200px;height: 40px;}
#input::-webkit-input-placeholder {
	 color: red;
	 font-size: 20px;
	 text-align: center;
	}
#input:-moz-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}
#input:-ms-input-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}

效果圖：

總結(jié)：以上介紹了placeholder屬性的使用方法，以及placeholder樣式修改的方法，比較簡單，但需要注意瀏覽器的兼容性。以前沒有接觸過placeholder的小伙伴，可以自己動手嘗試，希望可以幫助到你！

以上就是圖文詳解placeholder屬性的使用方法以及如何修改placeholder的默認(rèn)樣式的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！