一般我們常見(jiàn)placeholder偽類選擇器用來(lái)修改默認(rèn)樣式及文案，忽然發(fā)現(xiàn)placeholder-shown偽類選擇器，比較官方的解釋是。

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

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

兼容性如下，在移動(dòng)端沒(méi)什么問(wèn)題

placeholder-show是如何工作的?

:placeholder-shown CSS 偽類 在 <input> 或 <textarea> 元素顯示 placeholder text 時(shí)生效，簡(jiǎn)單的說(shuō)就是 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 就沒(méi)效果了：

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

:placeholder-shown vs ::placeholder

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

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

注意一些奇怪的問(wèn)題??-我們?cè)O(shè)置 color: green，但沒(méi)有作用用。這是因?yàn)?placeholder-shown僅會(huì)針對(duì)input本身。對(duì)于實(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是專門(mén)用于確定元素是否顯示占位符的對(duì)象，我們主要使用它來(lái)檢查input 內(nèi)容是否為空(假設(shè)所有的input都有一個(gè)占位符)。這里你可能會(huì)想，使用 empty 也是可以的吧?我們來(lái)看看。

// html 
<input value="not empty"> 
<input><!-- empty --> 
 
// 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è)置的樣式。

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

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

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

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

組合其它選擇器

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

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

實(shí)戰(zhàn)

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

具體代碼如下:

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; 
} 

作者：Samantha Ming 譯者：前端小智 來(lái)源：medium 原文：https://www.samanthaming.com/tidbits/88-css-placeholder-shown/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。