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

創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、自適應(yīng)網(wǎng)站建設(shè)、展示型成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

CSS代碼

在火狐瀏覽器中的寫法和在谷歌瀏覽器和Safari里的寫法有些不同，但相信以后會統(tǒng)一。

/* 通用 */
::-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; }

其實只是一句代碼，但為了實現(xiàn)范圍最廣的瀏覽器支持，加上了各自的瀏覽器引擎前綴(Vendor Prefix)，一下子變成了10幾行代碼，希望這種情況會盡快的過去。

一些基本的CSS樣式你都可以使用在placeholder上——顏色，字體，字體樣式等。你可以還可以創(chuàng)造更復(fù)雜的樣式，比如用GIF動畫。

以上就是關(guān)于“HTML5中怎么用placeholder美化input背景提示文字”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。