開場

今天我們的主角是偽類：placeholder-shown

效果

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

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

實際上，我們可以借助CSS :placeholder-shown偽類，純CSS，無任何JS，實現(xiàn)這樣的占位符交互效果。

:placeholder-shown表示，當輸入框的placeholder內(nèi)容顯示的時候，輸入框干嘛干嘛。

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

兼容性還是很不錯的，在移動端我們可以放心使用。因為就算一些老手機不支持，也不過是傳統(tǒng)的placeholder占位符效果，并沒有什么損失。

經(jīng)典案例

下面展示使用幾個:placeholder-shown實現(xiàn)label特性占位符案例。

輸入內(nèi)容功能布局效果也是正常的：

純CSS實現(xiàn)，要比JS實現(xiàn)好一千倍，代碼少，性能高，樣式調(diào)整方便，上手簡單容易，可謂是前端必備技能了。

實現(xiàn)原理

拿第一個fill模式的輸入框舉例，HTML結(jié)構(gòu)如下：

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

然后，后面的.input-label這個label元素代替成為我們?nèi)庋劭吹降恼嘉环?。我們可以采用絕對定位：

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

于是，效果達成！

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

趕快用起來吧

趕快項目中用起來吧！或者把這個技術(shù)分享給其他小伙伴吧~

其他

demo頁面還使用了其他一些CSS3屬性，例如，外部容器寬度是跟著輸入框?qū)挾茸叩?，使用的是width:fit-content這個聲明。

輸入框focus時候有個邊框動畫效果，借助了:focus-within偽類選擇器，:focus-within偽類選擇器也是非常強非常實用以后會大火的選擇器，如果不了解的一定要進行了解。

:placeholder-shown還可以實現(xiàn)下面的交互：輸入框的后面（或下方）會有關(guān)于輸入內(nèi)容的說明和提示信息（因為很長，placeholder放不下），當用戶輸入內(nèi)容，提示信息消失。

兼容性: IE10和egde下，填充模式慘不忍睹，其他無效果

關(guān)注公眾號【grain先森】，回復關(guān)鍵詞 【18福利】，獲取為你準備的年終福利，更多關(guān)鍵詞玩法期待你的探索~