1. 程式人生 > >HTML5之placeholder屬性以及如何更改placeholder屬性中文字顏色

HTML5之placeholder屬性以及如何更改placeholder屬性中文字顏色

-1 用法 .cn images email per xpl 中文 的人

  今天在群裏看到群友問了一個這樣的問題,就是如何更改placeholder屬性中文字的顏色,以前用過這屬性,卻是沒更改過顏色,於是便試了試,中途遇到些問題,查找資料後特來總結一下。

  熟悉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

HTML5之placeholder屬性以及如何更改placeholder屬性中文字顏色