如何使用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的分享，歡迎有興趣的朋友參考！