今天要給大家介紹的是HTML5網頁placeholder美化input背景提示文字。我們大家都知道CSS3里提供了專門的規則屬性來美化用placeholder實現的input輸入框的背景提示信息。所以下面下面我們來看看如何用專用的CSS屬性來美化具有placeholder屬性的Input輸入框。如果我們想實現如下的顯示效果CSS代碼該如何書寫呢？

不兜圈子了，下面直接跟隨武林網上代碼。

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動畫。

實例演示效果就是上面的圖片效果，用了四種美化效果，我使用了autofocus將光標放在了第一個輸入框里，但可以在其它輸入框里也輸入信息。

   對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性，所以，這是一個可以大范圍只是的CSS技巧。

  擴展閱讀：

《15種jQuery表單placeholder占位符動畫插件效果》

《dedecms織夢信息提示框美化代碼》

《title美化效果 Bootstrap提示工具（Tooltip）插件》