台灣最大程式設計社群網站
線上人數
749
 
會員總數:244988
討論主題:188956
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> 請教input box 的效果 placeholder
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
請教input box 的效果 placeholder
價值 : 100 QP  點閱數:105 回應數:1

樓主

大雄
門外漢
0 42
1140 84
發送站內信

請教一下各位前輩

無意間看到註冊google帳戶的頁面
它的輸入方塊input 裡使用的placeholder
當我點到方塊裡面的時候,placeholder的提示字 就會跑到輸入方塊的左上角,我覺的蠻實用的
想請教大家要如何實現它
google帳戶的註冊頁面:https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp
若怕連結有問題,請各位直接到註冊google帳戶的頁面查看

搜尋相關Tags的文章: [ placeholder ] , [ input ] ,
本篇文章發表於2019-07-30 18:50
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

迷路
捐贈 VP 給 迷路 檢舉此回應
那個效果看起來像是placeholder
但是實際檢視就能發現並非使用那個屬性的效果
Google是手動製作的效果
在input後面有一個div,裡面是提示字
預設會蓋在input上面
當focus到input時
上面四層的div class會增加
然後div會縮小跑到左上的位置
當focus離開時
上面四層的div剛增加的class會被移除
當input有輸入值時,也會新增一個class
這個class會讓div被鎖定在左上的位置
詳細的class內容你可以自己用檢視查看
本篇文章回覆於2019-08-01 09:23
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.