HTML5中怎么用placeholder美化input背景提示文字

這篇“HTML5中怎么用placeholder美化input背景提示文字”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5中怎么用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動畫。

以上就是關于“HTML5中怎么用placeholder美化input背景提示文字”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。