HTML5中如何設(shè)置placeholder的樣式

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

創(chuàng)新互聯(lián)專注于吉林企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城系統(tǒng)網(wǎng)站開發(fā)。吉林網(wǎng)站建設(shè)公司,為吉林等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

適用范圍：

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

兼容性：

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

2.jpg

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

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

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

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

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

下面我們就通過簡單的代碼示例來介紹使用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;

}

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

說明：

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

注意：

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中如何設(shè)置placeholder的樣式”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站欄目：HTML5中如何設(shè)置placeholder的樣式
文章起源：http://muchs.cn/article8/iiooip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、微信小程序、企業(yè)建站、網(wǎng)頁設(shè)計(jì)公司、動態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)