這篇文章主要介紹CSS中的:placeholder-shown偽類有什么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供港口網(wǎng)站建設(shè)、港口做網(wǎng)站、港口網(wǎng)站設(shè)計、港口網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、港口企業(yè)網(wǎng)站模板建站服務(wù)，10多年港口做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

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

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

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

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設(shè)置input元素的樣式。

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

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

input::placeholder {
  color: green;
}

我注意到有一些其他的屬性，如果應(yīng)用::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 內(nèi)容是否為空（假設(shè)所有的input都有一個占位符）。 這里你可能會想，使用 empty 也是可以的吧？我們來看看。

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

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

input {
  border: 1px solid black;
}

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

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

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

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

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

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

實戰(zhàn)

用placeholder-shown我們可以實現(xiàn)下面動效

具體代碼如下:

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偽類有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：CSS中的:placeholder-shown偽類有什么用
網(wǎng)站路徑：http://aaarwkj.com/article26/jeehjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站建設(shè)、用戶體驗、定制網(wǎng)站、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)