HTML5中如何設置placeholder的樣式

這篇文章主要介紹了HTML5中如何設置placeholder的樣式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　首先我們來了解一下placeholder是什么？

　　placeholder是HTML5新增的一個屬性，該屬性的作用是規定可描述輸入字段預期值的簡短的提示信息，這個提示會在用戶輸入之前顯示在輸入框中，然后在用戶輸入字段后消失。

　　根據瀏覽器的不同，當輸入字段（框）成為焦點時，該提示信息（占位符）可能會保持可見，也可能不會保持可見。例如，IE10+將在輸入聚焦時會隱藏，即使它仍為空。

　　適用范圍：

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

　　兼容性：

　　因為是HTML5中的新增屬性，所以會存在兼容性的問題。下面我們來看看瀏覽器的支持情況：

　　2.jpg

　　表格中的數字表示支持該屬性的第一個瀏覽器版本號。

　　placeholder屬性的基本用法，舉例說明：

　　用戶名：<inputtype="text"placeholder="請輸入用戶名"><br/>

　　&nbsp;密&nbsp;碼：<inputtype="password"placeholder="請輸入密碼">

　　一般情況下placeholder屬性會有自己默認的樣式，當有時為了頁面的整體美觀，我們就想要自定義樣式，那么如何來設置placeholder的樣式？

　　下面我們就通過簡單的代碼示例來介紹使用css3設置placeholder的樣式的方法。

　　css3設置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;

　　}

　　可以看出，我們是通過css3的::placeholder偽元素來設置placeholder屬性樣式的。在css3中，偽元素::placeholder是用于設置對象文字占位符的樣式。

　　說明：

　　::placeholder偽元素用于控制表單輸入框占位符的外觀，它允許開發者/設計師改變文字占位符的樣式，默認的文字占位符為淺灰色。當表單背景色為類似的顏色時它可能效果并不是很明顯，那么就可以使用這個偽元素來改變文字占位符的顏色。

　　注意：

　　有些瀏覽器有自己的::placeholder偽元素非標準實現。所有這些實現都需要瀏覽器前綴。這些實施方式的示例是::-webkit-input-placeholder，:-ms-input-placeholder（單冒號），并且:-moz-placeholder已Firefox19棄用，現在支持更新的是::-moz-placeholder偽元素。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5中如何設置placeholder的樣式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!