熟悉HTML5的人應該都知道，placeholder這個屬性是HTML5中新增的屬性，該屬性的作用是規定可描述輸入字段預期值的簡短的提示信息，該提示會在用戶輸入之前顯示在輸入字段中，會在用戶輸入字段后消失，有些瀏覽器則是獲得焦點后該提示便消失（如Safari、IE）

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

　　因為是HTML5中新增的屬性，所以會存在兼容性問題。下面說說瀏覽器的支持情況：

　　IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 屬性。IE9及以下版本不支持input的placeholder屬性。

　　placeholder的用法，舉例：

　　?<input?type="text"?placeholder="請輸入您要搜索的內容！">?

　　結果：

　　

　　該提示文字會有自己默認的顏色，然而有時候，我們并不希望用該默認顏色，而是想自定義顏色。那么該怎么處理呢?不廢話，上代碼。　

<style>input::-webkit-input-placeholder{color:red;}input::-moz-placeholder{ /* Mozilla Firefox 19+ */color:red;}input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */color:red;}input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:red;}</style>

　　針對不同瀏覽器或不同版本的瀏覽器會有不同的寫法，會添加相應的前綴。

　　注意：

　　1、WebKit, Blink, Edge瀏覽器等需要帶上-webkit-前綴，且是雙冒號，寫的時候還要帶上input

　　2、針對火狐瀏覽器則有兩種寫法，一種是針對低版本的，一種是針對高版本的，二者都需要帶上-moz-前綴。要點1：火狐低版本的使用冒號（：），而高版本的使用雙冒號（：：）；要點2：火狐瀏覽器不需要像webkit內核那樣要帶上input。

　　3、由于placeholder屬性只在IE10+才支持，因此，針對IE10、IE11的寫法是加上-ms-前綴，使用的是冒號（：），需要帶上input

　　

　　特別強調：冒號與雙冒號的問題，還有是否需要加上input

作者：江峰★?
出處：http://www.cnblogs.com/jf-67/?
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利

?

/* placeholder字體大小 */ font-size: 12px; /* placeholder位置 */ text-align: right;

轉載于:https://www.cnblogs.com/wzp-monkey/p/10712139.html

總結

以上是生活随笔為你收集整理的HTML5之placeholder属性以及如何更改placeholder属性中文字颜色大小位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。