CSS偽類 :placeholder-shown的用法

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

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

簡單來說就是當輸入框的placeholder內容顯示的時候，輸入框干嘛干嘛。

兼容性如下，在移動端沒什么問題

placeholder-show是如何工作的?

:placeholder-shown CSS 偽類 在 <input> 或 <textarea> 元素顯示 placeholder text 時生效，簡單的說就是 placeholder 有值才生效，如下所示：

// html <input placeholder="placeholder text" /> <textarea placeholder="placeholder text"></textarea>  // css  input:placeholder-shown, textarea:placeholder-shown{    border:1px solid pink; }

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

// html <input placeholder="" /> <textarea placeholder=" text"></textarea>

:placeholder-shown vs ::placeholder

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

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

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

input::placeholder {   color: green; }

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

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

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

:placeholder-shown vs :empty

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

// html <input value="not empty"> <input><!-- empty -->  // css input:empty {   border: 1px solid pink; }  input {   border: 1px solid black; }

這里看似empty起作用了，因為我們看到的是粉紅色邊框，但這實際上不起作用??

之所以顯示粉紅色，是因為偽類增加了 css  的權重。類似于類選擇器(即.form-input)比類型選擇器(即input)具有更高的權重。高權限選擇器將始終覆蓋低權重設置的樣式。

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

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

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

// html <input placeholder=" "><!-- ? pass empty string -->  //css input:placeholder-shown {   border-color: pink; }

組合其它選擇器

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

//html <input placeholder="placeholder" value="not empty" />  // css input:not(:placeholder-shown) {   border: 1px solid green; }

實戰

用placeholder-shown我們可以實現下面動效

具體代碼如下:

Html

<div class="input">     <input class="input-fill" placeholder="郵箱">     <label class="input-label">郵箱</label> </div>

Css

.input{    position: relative;  } .input-fill{   border: 1px solid #ececec;   outline: none;   padding: 13px 16px 13px;   font-size: 16px;   line-height: 1.5;   width: fit-content;   border-radius: 5px; } .input-fill:placeholder-shown::placeholder {   color: transparent; } .input-label {   position: absolute;   font-size: 16px;   line-height: 1.5;   left: 16px; top: 14px;   color: #a2a9b6;   padding: 0 2px;   transform-origin: 0 0;   pointer-events: none;   transition: all .25s; } .input-fill:focus{   border: 1px solid #2486ff; } .input-fill:not(:placeholder-shown) ~ .input-label, .input-fill:focus ~ .input-label {   transform: scale(0.75) translate(0, -32px);   background-color: #fff;   color: #2486ff; }

到此，相信大家對“CSS偽類 :placeholder-shown的用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！