CSS :placeholder-shown 有什麼用？

使用此僞類來設置當前顯示佔位符文本的輸入的樣式，換句話說，用戶未在文本框中鍵入任何內容 📭

根據您的輸入是否爲空，應用一些動態樣式很是好 👏

input:placeholder-shown {
  border-color: pink;
}

它是如何工做的？

:placeholder-show 是CSS僞類，可以讓您將樣式應用於具備佔位符文本的 <input> 或 <textarea>。

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

結果：

• 若是顯示佔位符，則爲粉紅色，表示用戶未輸入任何內容
• 若是未顯示任何佔位符，則爲黑色，表示用戶已鍵入內容

:placeholder-showd必須具備佔位符

若是元素沒有佔位符文本，則此選擇器將不起做用。

<input /><!-- 沒有佔位符 -->

<!-- 這也被視爲沒有佔位符文本 -->
<input placeholder="" />

input:placeholder-shown {
  border-color: pink;
}

:placeholder-shown vs ::placeholder

所以，咱們可使用 :placeholder-shown 設置輸入元素的樣式。

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

☝️嗯...注意到有些奇怪🤔——咱們將顏色設置爲：綠色，但沒有用。好吧，這是由於 :placeholder-shown 只針對輸入自己。可是對於實際的佔位符文本，您必須使用僞元素 ::placeholder。

input::placeholder {
  color: green;
}

可是！當我在處理這個問題時，我注意到還有一些其餘屬性，若是在 :placeholder-shown 級別應用，將會影響到佔位符文本。

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

如今，我真的不知道爲何會發生這種狀況 🤷‍♀️ 也許是由於這些屬性被佔位符繼承了。

:placeholder-shown vs :empty

儘管 :placeholder-shown 是專門用於肯定元素是否顯示佔位符的。實際上，咱們可使用它來檢查輸入是否爲空（固然，假設全部輸入都有一個佔位符）。所以，也許您的下一個問題是，咱們不能使用CSS empty嗎？好吧，讓咱們檢查一下 👩‍🔬

<input value="not empty">
<input><!-- empty -->

input:empty {
  border: 1px solid pink;
}

input {
  border: 1px solid black;
}

期待：

• 若是爲空則爲粉紅色
• 若是不爲空爲黑色

嗯...從這裏開始，您可能會認爲 :empty 彷佛在起做用，由於咱們看到的是粉紅色邊框。但這實際上不起做用😔

粉紅色顯示的緣由是由於僞類增長了特異性，相似於類選擇器（即 .form-input）比類型選擇器（即 input）具備更高的特異性。高特異性選擇器將始終覆蓋低特異性設置的樣式。

這是判決！不要使用 :empty 檢查輸入元素是否爲空🙅‍♀️

如何在沒有佔位符的狀況下檢查輸入是否爲空？

好了，因此咱們檢查輸入是否爲空的惟一方法是使用 :placeholder-shown。可是，若是咱們的輸入元素沒有佔位符，會發生什麼狀況？好吧，這是一個聰明的方法！傳入一個空字符串 " "。

<input placeholder=" "><!-- 👈 傳遞空字符串 -->

input:placeholder-shown {
  border-color: pink;
}

與其餘選擇器組合

因此，咱們能夠針對顯示佔位符文字的輸入元素，這很酷。換句話說，若是顯示了佔位符文本，那麼必定意味着該元素是空的。利用這些知識，咱們能夠將這個僞類與其餘選擇器結合起來，作一些很是整潔的事情！讓咱們來看看 🤩。

反向 :placeholder-shown 爲 :not

咱們可使用 :not 僞類來作一些反向的事情。在這裏，咱們能夠在輸入不是空的時候進行目標操做。

<input placeholder="placeholder" value="not empty" />

input:not(:placeholder) {
  border-color: green;
}

結果：

• 綠色，若是不爲空，則表示用戶已經輸入了一些內容。
• 若是爲空，則爲黑色

浮動標籤

使用佔位符而不使用標籤的問題之一就是無障礙，由於一旦你在打字的時候，佔位符文字就沒有了，這可能會致使用戶的困惑。一個真正好的解決方案是浮動標籤。最初，佔位符文本顯示時沒有標籤，而一旦用戶開始輸入，標籤就會出現。這樣一來，你仍然能夠在不影響用戶體驗和可訪問性的前提下，保持表單的簡潔性。共贏 🥳

而這是能夠用純CSS實現的，咱們只須要將 placeholder-shown 與 :not 和 + 結合起來就能夠了。這是一個超級簡化版的浮動標籤。

<input name="name" placeholder="Type name..." />
<label for="name">NAME</label>

label {
  display: none;
  position: absolute;
  top: 0;
}

input:not(:placeholder-shown) + label {
  display: block;
}

瀏覽器支持

對 :placeholder-shown 的支持很是好！這包括Internet Explorer（是的，我和你同樣驚訝😆）。可是，對於IE，你須要使用非標準名稱 :-ms-input-placeholder。