文章彙整

如何使用css來隱藏placeholder文字?

Astral WebBy Astral Web 5 years agoNo Comments
首頁  /  網站設計與開發  /  如何使用css來隱藏placeholder文字?

用css來隱藏placeholder

設計表單的輸入欄位時、常用placeholder來做提示文字,在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後,placeholder的文字會立即消失,一般常用的方法就是利用 onfocus 和 onblurl來達成。

<input type="text" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" />

但要設定每個輸入欄位相當不便,只要使用css就能簡單達到此效果。

input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

只要在css設定好、所有的輸入欄位的placeholder文字都可以在點選時消失,是不是很方便呢?以上就是Astral Web的分享,歡迎有興趣的朋友參考!

歐斯瑞編寫製作

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。