強大的CSS：placeholder-shown偽類實現Material Design佔位符互動效果

一、Material Design規範中佔位符互動效果

Material Design風格佔位符互動效果官方示意見此 demo頁面 。

效果可以參見下面的GIF錄屏示意：

現在這種設計在移動端很常見，因為寬度是稀缺的。相信不少人設計專案中有實現過這種互動，而且，我敢保證是利用JS實現的。

實際上，我們可以藉助CSS :placeholder-shown偽類，純CSS，無任何JS，實現這樣的佔位符互動效果。

:placeholder-shown表示，當輸入框的placeholder內容顯示的時候，輸入框幹嘛幹嘛。

:placeholder-shown偽類目前相容性如下：

相容性還是很不錯的，在移動端我們可以放心使用。因為就算一些老手機不支援，也不過是傳統的placeholder佔位符效果，並沒有什麼損失。

二、:placeholder-shown經典案例

展示使用幾個:placeholder-shown實現label特性佔位符案例。

下面就是我實現的demo頁面中的效果圖（GIF動圖）：

輸入內容功能也是佈局效果也是正常的：

純CSS實現，要比JS實現好一千倍，程式碼少，效能高，樣式調整方便，上手簡單容易，可謂是前端必備技能了。

實現原理

拿第一個fill模式的輸入框舉例，HTML結構如下：

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

首先， 讓瀏覽器預設的placeholder效果不可見，我們可以讓顏色透明即可，如下CSS：

/* 預設placeholder顏色透明不可見 */
.input-fill:placeholder-shown::placeholder {
    color: transparent;
}

然後， 後面的 .input-label 這個label元素代替成為我們肉眼看到的佔位符。我們可以採用絕對定位：

.input-fill-x {
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
}

最後， 對這個label元素在輸入框focus時候，以及非placeholder顯示的時候進行重定位（縮小並位移到上方）：

.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0, -32px);
}

於是，效果達成！

是不是要比JS寫各種事件，判斷各種場景簡單多了？

三、趕快專案中用起來吧

趕快專案中用起來吧！或者把這個技術分享給其他小夥伴吧~

其他

• demo頁面還使用了其他一些CSS3屬性，例如，外部容器寬度是跟著輸入框寬度走的，使用的是width:fit-content]這個宣告。
• 輸入框focus時候有個邊框動畫效果，藉助了:focus-within偽類選擇器，:focus-within偽類選擇器也是非常強非常實用以後會大火的選擇器，如果不瞭解的一定要進行了解。
• :placeholder-shown還可以實現下面的互動：輸入框的後面（或下方）會有關於輸入內容的說明和提示資訊（因為很長，placeholder放不下），當使用者輸入內容，提示資訊消失。

自己是一個五年的前端工程師,希望本文對你有幫助！

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術