本篇內(nèi)容主要講解“CSS偽類 :placeholder-shown的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS偽類 :placeholder-shown的用法”吧!

目前創(chuàng)新互聯(lián)公司已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、忠縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

CSS偽類表示任何顯示占位符文本的form元素。

簡單來說就是當(dāng)輸入框的placeholder內(nèi)容顯示的時(shí)候，輸入框干嘛干嘛。

兼容性如下，在移動(dòng)端沒什么問題

placeholder-show是如何工作的?

:placeholder-shown CSS 偽類 在 或 元素顯示 placeholder text 時(shí)生效，簡單的說就是 placeholder 有值才生效，如下所示：</p><pre>// html <input placeholder="placeholder text" /> <textarea placeholder="placeholder text">  // css  input:placeholder-shown, textarea:placeholder-shown{    border:1px solid pink; }

如果 placeholder 為空 placeholder-show 就沒效果了：

// html  

:placeholder-shown vs ::placeholder

我們可以使用:placeholder-shown設(shè)置input元素的樣式。

input:placeholder-shown {   border: 1px solid pink;   background: yellow;   color: green; }

注意一些奇怪的問題??-我們設(shè)置 color:  green，但沒有作用用。這是因?yàn)?placeholder-shown僅會(huì)針對input本身。對于實(shí)際的占位符文本，必須使用偽元素::placeholder。

input::placeholder {   color: green; }

我注意到有一些其他的屬性，如果應(yīng)用::placeholder-shown，也會(huì)影響placeholder的樣式。

input:placeholder-shown, textarea:placeholder-shown{    font-style: italic;   text-transform: uppercase;   letter-spacing: 5px; }

我也不知道這是啥情況，也許是因?yàn)檫@些屬性被placeholder繼承了，如果你知道原因，歡迎留言告訴我一下，謝謝。

:placeholder-shown vs :empty

:placeholder-shown是專門用于確定元素是否顯示占位符的對象，我們主要使用它來檢查input  內(nèi)容是否為空(假設(shè)所有的input都有一個(gè)占位符)。這里你可能會(huì)想，使用 empty 也是可以的吧?我們來看看。

// html    // css input:empty {   border: 1px solid pink; }  input {   border: 1px solid black; }

這里看似empty起作用了，因?yàn)槲覀兛吹降氖欠奂t色邊框，但這實(shí)際上不起作用??

之所以顯示粉紅色，是因?yàn)閭晤愒黾恿?css  的權(quán)重。類似于類選擇器(即.form-input)比類型選擇器(即input)具有更高的權(quán)重。高權(quán)限選擇器將始終覆蓋低權(quán)重設(shè)置的樣式。

所以我們可以這樣說：不要使用:empty檢查輸入元素是否為空。

如果檢查 input 內(nèi)容是否為空(在沒有點(diǎn)位符的情況下)?

我們檢查輸入是否為空的唯一方法是使用:placeholder-shown。但是如果我們的輸入元素沒有占位符會(huì)發(fā)生什么呢?  這里有個(gè)取巧的方法：傳入一個(gè)空字符串" "。

// html   //css input:placeholder-shown {   border-color: pink; }

組合其它選擇器

我們可以使用:not偽類對某些事物進(jìn)行逆運(yùn)算。在這里，我們可以在輸入不是空的情況下進(jìn)行定位。

//html   // css input:not(:placeholder-shown) {   border: 1px solid green; }

實(shí)戰(zhàn)

用placeholder-shown我們可以實(shí)現(xiàn)下面動(dòng)效

具體代碼如下:

Html

          郵箱