css3設(shè)置placeholder樣式的方法

這篇文章將為大家詳細(xì)講解有關(guān)css3設(shè)置placeholder樣式的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

首先我們來(lái)了解一下placeholder是什么？

placeholder是HTML5新增的一個(gè)屬性，該屬性的作用是規(guī)定可描述輸入字段預(yù)期值的簡(jiǎn)短的提示信息，這個(gè)提示會(huì)在用戶(hù)輸入之前顯示在輸入框中，然后在用戶(hù)輸入字段后消失。

根據(jù)瀏覽器的不同，當(dāng)輸入字段（框）成為焦點(diǎn)時(shí)，該提示信息（占位符）可能會(huì)保持可見(jiàn)，也可能不會(huì)保持可見(jiàn)。例如，IE10 +將在輸入聚焦時(shí)會(huì)隱藏，即使它仍為空。

適用范圍：

placeholder 屬性適用于下面的 input 類(lèi)型：text、search、url、tel、email 和 password。

兼容性：

因?yàn)槭荋TML5中的新增屬性，所以會(huì)存在兼容性的問(wèn)題。下面我們來(lái)看看瀏覽器的支持情況：

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

placeholder屬性的基本用法，舉例說(shuō)明：

用戶(hù)名：<input type="text" placeholder="請(qǐng)輸入用戶(hù)名"> <br />
&nbsp;密&nbsp;碼：<input type="password" placeholder="請(qǐng)輸入密碼">

效果圖：

一般情況下placeholder屬性會(huì)有自己默認(rèn)的樣式，當(dāng)有時(shí)為了頁(yè)面的整體美觀(guān)，我們就想要自定義樣式，那么如何來(lái)設(shè)置placeholder的樣式？

下面我們就通過(guò)簡(jiǎn)單的代碼示例來(lái)介紹使用css3設(shè)置placeholder的樣式的方法。

css3設(shè)置placeholder的樣式代碼示例：

input::-webkit-input-placeholder {
  color: palevioletred;
}

input::-moz-placeholder {
  color: palevioletred;
}

input:-ms-input-placeholder {
  color: palevioletred;
}

input::-webkit-input-placeholder {
  color: palevioletred;
}

input::placeholder {
  color: palevioletred;
}

效果圖：

可以看出，我們是通過(guò)css3的::placeholder偽元素來(lái)設(shè)置placeholder屬性樣式的。在css3中，偽元素::placeholder是用于設(shè)置對(duì)象文字占位符的樣式。【相關(guān)視頻教程推薦：CSS3教程】

說(shuō)明：

::placeholder 偽元素用于控制表單輸入框占位符的外觀(guān)，它允許開(kāi)發(fā)者/設(shè)計(jì)師改變文字占位符的樣式，默認(rèn)的文字占位符為淺灰色。當(dāng)表單背景色為類(lèi)似的顏色時(shí)它可能效果并不是很明顯，那么就可以使用這個(gè)偽元素來(lái)改變文字占位符的顏色。

注意：

有些瀏覽器有自己的::placeholder偽元素非標(biāo)準(zhǔn)實(shí)現(xiàn)。所有這些實(shí)現(xiàn)都需要瀏覽器前綴。這些實(shí)施方式的示例是::-webkit-input-placeholder，:-ms-input-placeholder（單冒號(hào)），并且:-moz-placeholder已Firefox 19棄用，現(xiàn)在支持更新的是::-moz-placeholder偽元素。

除了Firefox是 ::[prefix]placeholder，其他瀏覽器都是使用 ::[prefix]input-placeholder。

偽元素::placeholder的兼容性：

::-moz-placeholder 偽元素在Firefox 19+后替代了之前的 :-moz-placeholder 偽類(lèi)

關(guān)于css3設(shè)置placeholder樣式的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。