2018.07.09

コーディング

フォームのデフォルト表示「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があるとフォームのユーザビリティを高めたり、見た目をすっきりさせる効果が得られます。ユーザーにわかりやすいフォームを設計することでコンバージョンに繋げましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する