Google Material Design 表單標籤效果
Sep 7, 2018 · 2 min read

自從Google設計了Material Desgin後,除了按鈕的漣漪效果讓人驚豔外,表單label跟input的結合方試也跟著讓很多人「致敬」,好啦其實是模仿。
第一次看到的時候,原本想找個時間來寫label、input那個效果的,但就一直沒抽出時間。
最近想用Netflix追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,想想Google的設計連Netflix都在用了,看來是個好設計,就決定自己來寫一個。
寫的結果放在codepen上:
寫的時候有遇到一個問題,單純用css,無法判斷input是否為空,因此當input有值以後,要讓label維持在focus的狀態,就只能用js。
後來google了一下,也看了Materialize、Netflix,看是不是用css去處理,但看上去,一樣都是用js在判斷。
有興趣的人可以看一下原始碼,就開放給大家始用了:

