之前在介紹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動畫。
實例演示
下面都是input輸入框，用了四種美化效果，我使用了autofocus將光標放在了第一個輸入框里，但可以在其它輸入框里也輸入信息，看看效果：
對於input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性，所以，這是一個可以大范圍只是的CSS技巧。