フォームのデフォルト表示「placeholder」のスタイル編集とselectタグでも実現する方法

テキストエリアやinputタグを使うフォームのパーツに、うっすらと記入方法のヒントや注意書きが書かれており、実際にテキストを記入し始めるとヒントの文字列は消える…このテキストのことをplaceholder プレースホルダーといいます。
inputタグやtextareaタグには機能として表示方法が実装されていますが、文字色や見た目の編集にはベンダープレフィクスによる指定が必要です。

今回はそんなplaceholderの実装とスタイルの編集方法、あわせてplaceholder機能のないselectタグでも同じ機能を実現する方法を紹介します。

inputタグとtextareaタグでのplaceholder

inputタグとtextareaタグではplaceholderは機能として実装されており、placeholder属性で指定できます。

See the Pen ZRgdYv by hoshu_t (@hoshu_t) on CodePen.

見た目の編集には以下のベンダープレフィクスを使用します。コロンの数に注意しましょう。

amp;:placeholder-shown
amp;::-webkit-input-placeholder
amp;:-ms-input-placeholder

わかりやすく赤文字にした使用例が以下です。

See the Pen dKxBYE by hoshu_t (@hoshu_t) on CodePen.

selectタグでのplaceholder

selectタグではplaceholder属性は実装されていません。スタイルで見た目を操作することによって同じ機能を実現します。方法は以下です。

See the Pen GGVbjp by hoshu_t (@hoshu_t) on CodePen.

optionタグの1つ目にplaceholderとして表示したい文字列を入力します。これにdisplay: none;をかけることでplaceholderとして実装できます。文字色はselectタグに指定し、項目の色はoptionタグで指定します。

まとめ

placeholderがあるとフォームのユーザビリティを高めたり、見た目をすっきりさせる効果が得られます。ユーザーにわかりやすいフォームを設計することでコンバージョンに繋げましょう。