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

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

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

當前標題：HTML5中怎么修改placeholder的默認樣式
本文鏈接：http://jinyejixie.com/article12/iicggc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、響應式網(wǎng)站、網(wǎng)站收錄、軟件開發(fā)、網(wǎng)站制作、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)