HTML5 中怎么修改placeholder的默認樣式

小編給大家分享一下HTML5 中怎么修改placeholder的默認樣式，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

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

一、placeholder屬性怎么用

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

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

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

效果圖：

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

二、placeholder屬性修改

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

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

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

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

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

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

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

舉例：修改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;
	}

效果圖：

看完了這篇文章，相信你對HTML5 中怎么修改placeholder的默認樣式有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！