之前在介紹HTML5的placeholder屬性時，曾實現了一些頁面例子讓大家參考，但這些例子裡的背景文字都是灰色的，樣式很單一，其實它們可以做的更好看，CSS3裡提供了專門的規則屬性來美化用placeholder實現的input輸入框的背景提示資訊。下面我們來看看如何用專用的CSS屬性來美化具有placeholder屬性的Input輸入框。

CSS程式碼

在火狐瀏覽器中的寫法和在谷歌瀏覽器和Safari裡的寫法有些不同，但相信以後會統一。

/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color
 
:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* webkit專用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder {
 
 font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* mozilla專用 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing
 
:3px; color:#999; }

其實只是一句程式碼，但為了實現範圍最廣的瀏覽器支援，加上了各自的瀏覽器引擎字首(Vendor Prefix)，一下子變成了10幾行程式碼，希望這種情況會盡快的過去。

一些基本的CSS樣式你都可以使用在placeholder上——顏色，字型，字型樣式等。你可以還可以創造更復雜的樣式，比如用GIF動畫。