iPhone（iOS）のみフォームの透かし文字（Placeholder）を上下中央に変更する方法

本日は業務メモです。iOSでフォーム内の透かし文字（Placeholder）を上下センター位置に調整する方法です。PCやアンドロイドでは指定せずにiOSのみ指定するCSSをご紹介いたします。お問い合わせフォーム内に差し込んだ透かし文字がiOSだけ「上付き（下側が空きすぎる）」になるので回避策として使えます。

iPhone（iOS）のみフォームの透かし文字（Placeholder）を上下中央に変更する方法

フォーム内に表示されている文字の位置を縦方向のセンターに設置したいシチュエーションがあります。iOS系の端末（iPhone/iPad等）ではフォームの透かし文字（placeholder）が少し上側に表示されます。

CSSを指定する前の状態

念のため拡大して、上下の幅を見比べてみましょう。下側が余分に空いていますね。

解決策はiOSのみにかける「padding-top」を指定すればOKです。

input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder {
	padding-top: 0.15em;
}

上記は一般的なフォーム３種類（テキストフィールド、メールフィールド、検索フィールドで使うinput）に対して上方向のpaddingを指定しています。指定の値は状況に合わせて微調整してくださいませ。

CSSで指定したあとの状態

少し拡大して見てみましょう。おおよそ上下の中央位置に表示されていますね。

文字を入力するカーソルを合わせても特に違和感はありませんね。ちょうど良い位置に表示できています。

まとめ

Placeholder（透かし文字）があると利用者さんへの簡易ナビゲーションになります。ただ、文字の表示位置がずれているとサイトの来訪ユーザーが気持ちよくサイト検索を使えなくなります。小さな改善の繰り返しで快適なウェブサイトは手に入ります。気になっていた方はぜひお試しください。