為HTML5 placeholder占位文字添加css樣式

placerholder屬性是HTML5中的新屬性。


定義和用法:

? ? ? ?placeholder屬性提供可描述輸入字段預(yù)期值的提示信息。

? ? ? ?該提示會在輸入字段為空時(shí)顯示,并會在字段獲得焦點(diǎn)時(shí)消失。

?語法:

? ? ? <input ?placeholder="text ">

?屬性值:

? ? ? text規(guī)定用于驗(yàn)證輸入字段的模式。

? ? ? ?簡單說,就是提示用戶輸入什么類型的信息。

注釋:

? ? ? placeholder屬性適應(yīng)于以下的<input >類型:text ,search,url,telephone,email以及password。

placeholder默認(rèn)顯示為灰色

?我們可以通過css控制placeholder文字的樣式。

以下為各個(gè)瀏覽器廠商為其提供的偽類控制屬性:



::-webkit-input-placeholder{}/*使用webkit內(nèi)核的瀏覽器*/

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

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

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


具體實(shí)例實(shí)現(xiàn):


主要代碼:




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • H5移動(dòng)端知識點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,824評論 0 26
  • 移動(dòng)開發(fā)基本知識點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,719評論 0 6
  • 寫在從深圳返家的途中。呆在一個(gè)地方已經(jīng)至少兩個(gè)鐘了,看來十一要在路上與眾位萍水相逢的同乘們一起度過了。 好了,話不...
    沐酒鴻江閱讀 389評論 0 0
  • 以下是常用的代碼收集,學(xué)習(xí)用。轉(zhuǎn)自[豪情博客園] (http://www.cnblogs.com/jikey/p/...
    自由加咖啡閱讀 1,199評論 0 1
  • 悄悄地聲消。 我手捧若千層巨石般的備考書,穿上五彩斑斕的潛水衣,似一只鰻魚般潛入了這片海洋,試圖找尋那另我欣喜的寶...
    邱天閱讀 268評論 0 0

友情鏈接更多精彩內(nèi)容