圖文詳解placeholder屬性的使用方法以及如何修改placeholder的預設樣式

在頁面佈局時常會用到input輸入框，有時為了提示使用者輸入正確的訊息，需要用placeholder屬性加以說明。這篇文章就跟大家講placeholder屬性怎麼用以及如何修改placeholder屬性的樣式，有興趣的朋友可以參考一下，希望對你有幫助！

placeholder 是HTML5 中新增的屬性。 placeholder可以用來描述輸入欄位預期值的簡短的提示訊息。提示資訊會在使用者輸入值之前顯示，一旦使用者輸入資訊該提示就會自動消失。例如：我們在登入時需要輸入使用者名稱和密碼，它會提示你什麼地方輸入使用者名，什麼地方輸入密碼，這個就是使用的placeholder屬性。

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

一、placeholder屬性怎麼用

語法： placeholder="你想要提示的內容"

可以直接在需要提示的input輸入框中加上placeholder屬性，例如：

<input type="text" id="input" placeholder="请输入用户名" />

效果圖：

##如圖所示，input輸入框裡面提示使用者輸入使用者名稱

二、placeholder屬性修改

當placeholder屬性預設的顏色，樣式等不能滿足我們的需要時，需要修改它的樣式。

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

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

::-webkit-input-placeholder{}    /* 使用webkit核心的瀏覽器*/

:-moz-placeholder{}                ox /* Firef 版本

:-ms-input-placeholder{}     說明placeholder樣式，將input提示框中文字的顏色設為紅色，字體設為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;
	}

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

以上是圖文詳解placeholder屬性的使用方法以及如何修改placeholder的預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！