又一個佈局利器， CSS 僞類 :placeholder-shown

做者：Samantha Ming
譯者：前端小智
來源：medium

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

通常咱們常見placeholder僞類選擇器用來修改默認樣式及文案，突然發現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;
}

人才們的 【三連】 就是小智不斷分享的最大動力，若是本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝你們的觀看。

---

編輯中可能存在的bug無法實時知道，過後爲了解決這些bug,花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.samanthaming.com/...

---

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。