HTML5的特性曾經(jīng)充斥著各種互聯(lián)網(wǎng)社區(qū)，現(xiàn)在，它的特性越來(lái)越多的被各種瀏覽器所支持 ，我們可以使用它的更多的功能，如自定義文本的外觀

　　::input-placeholder CSS偽元素，無(wú)論輸入什么字段，該元素都為我們提供了一個(gè)符合設(shè)計(jì)標(biāo)準(zhǔn)的占位符文本的樣式。

　　占位符文本的樣式

　　瀏覽器預(yù)定義的樣式，可以通過(guò)占位符屬性顯示文本。默認(rèn)情況下，文本是一個(gè)淺灰色的，這種情況下難以閱讀。當(dāng)開(kāi)發(fā)人員發(fā)現(xiàn)，沒(méi)有任何CSS樣式選項(xiàng)可用于占位符之后。 我們發(fā)現(xiàn)::input-placeholder偽元素，可以讓我們擺脫UA規(guī)范，提供更多的造型靈活性。

　　例如，讓我們使用下面的占位符，并改變其顏色和文字：

 <input type="text" placehold

er="I'm placeholder text!">

　　然后，我們將使用新的偽元素創(chuàng)建一個(gè)CSS規(guī)則：

 input::-webkit-input-placeholder {

    color: rgba(0,5,143,.5);

    text-transform: uppercase;

 }

　　單獨(dú)定義選擇器(否則將被忽略整個(gè)規(guī)則的瀏覽器)

  input::-webkit-input-placeholder {

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input::-moz-placeholder {

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input:-moz-placeholder {   /* Older versions of Firefox */

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input:-ms-input-placeholder { 

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 } 

　　占位符屬性選擇器

　　是否要有一個(gè)占位符屬性的[placeholder]選擇器，完全是由輸入字段決定的：

 input[placeholder] {

    font-weight: bold;

    border-color: blue;

 }

　　現(xiàn)在，每一個(gè)輸入字段，就有一個(gè)占位符屬性將變成字體粗細(xì)和藍(lán)色的邊框。

　　我們可以使用哪些屬性?

　　并非所有的CSS屬性都支持::input-placeholder規(guī)則。 事實(shí)上，只有極少數(shù)的CSS熟悉才支持，其中最有用的如：

　　color

　　font-size

　　font-style

　　font-weight

　　letter-spacing

　　line-height

　　padding

　　text-align

　　text-decoration

　　重要的是，占位符樣式并不會(huì)影響它的盒子模型。

　　瀏覽器支持

　　目前支持::input-placeholder偽元素的瀏覽器有 Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10.。 從上文的分析我們可以知道即使這樣小的增強(qiáng)功能幫助我們做出了長(zhǎng)足的進(jìn)步，繼而產(chǎn)生良好的用戶體驗(yàn)。

　　(本文出自汪子臻用戶研究與體驗(yàn)設(shè)計(jì)中心http://wangzizhen.com/，轉(zhuǎn)載時(shí)請(qǐng)注明出處)