【JS不要】CSSだけで入力欄フォーカス時に消えるプレースホルダーを実装する - Qiita

お問い合わせフォームなどの入力欄にプレースホルダーを入れておきつつ、いざユーザーが入力しようとして入力欄をフォーカスしたらプレースホルダーが消えるようにする機能の実装方法メモ。 CSSだけで実装可能です。以下のコードをFoundationレイヤーのファイルなどにコピペして使ってください。 transitionは好みで入れているだけなので消してしまっても構いません（あるとフワッと文字が消えるので、ちょっとだけイケてる印象になります）。 // 入力欄にフォーカスした時、プレースホルダーを非表示にする。 input:focus::placeholder, textarea:focus::placeholder { color: transparent; transition: .1s; } // Chrome・Safari用 input:focus::-webkit-input-placehol