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

公司專注于為企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、電子商務(wù)商城網(wǎng)站建設(shè)，微信小程序定制開發(fā)，軟件按需設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗，我們會仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計、整合，為客戶設(shè)計出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)建站更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

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

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

一、placeholder屬性怎么用

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

可以直接在需要提示的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部分：

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的默認(rèn)樣式有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！