本日は業務メモです。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（透かし文字）があると利用者さんへの簡易ナビゲーションになります。ただ、文字の表示位置がずれているとサイトの来訪ユーザーが気持ちよくサイト検索を使えなくなります。小さな改善の繰り返しで快適なウェブサイトは手に入ります。気になっていた方はぜひお試しください。
【今すぐ無料プラグインを手に入れる】
→ 無料ダウンロードはこちら
