Google Material Design 表單標籤效果

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

本篇同步發表於:Let’s Write - Google Material Design 表單標籤效果

自從Google設計了Material Desgin後,除了按鈕的漣漪效果讓人驚豔外,表單label跟input的結合方試也跟著讓很多人「致敬」,好啦其實是模仿。

第一次看到的時候,原本想找個時間來寫label、input那個效果的,但就一直沒抽出時間。

最近想用Netflix追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,想想Google的設計連Netflix都在用了,看來是個好設計,就決定自己來寫一個。

寫的結果放在codepen上:

https://codepen.io/sean-su/full/wErBoJ/

寫的時候有遇到一個問題,單純用css,無法判斷input是否為空,因此當input有值以後,要讓label維持在focus的狀態,就只能用js。

後來google了一下,也看了MaterializeNetflix,看是不是用css去處理,但看上去,一樣都是用js在判斷。

有興趣的人可以看一下原始碼,就開放給大家始用了:

https://codepen.io/sean-su/pen/wErBoJ

Augustus Front-End study notes

Augustus,前端工程師的學習筆記

Augustus

Written by

Augustus

努力學習中的前端工程師。目前心得:前端是條不歸路啊孩子……https://letswrite.tw/

Augustus Front-End  study notes

Augustus,前端工程師的學習筆記

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade