開場
今天我們的主角是偽類：placeholder-shown
效果
效果可以參見下面的GIF示意：
現(xiàn)在這種設(shè)計在移動端很常見南吮，因為寬度是稀缺的。相信不少人設(shè)計項目中有實現(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ū)挾茸叩南峋褂玫氖莣idth: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)鍵詞玩法期待你的探索~
