2022-09-03

プレースホルダー(placeholder)の文字位置を調整する

入力ヒントを示すプレースホルダー(placeholder) の文字位置を変更したい場合は、 疑似要素「::placeholder」を使用します。

「テキストボックスの入力文字は左側だけど、プレースホルダーは中央に表示する」 といった設定が可能です。 文字位置を指定するには「text-align」プロパティを使用します。

以下のサンプルコードは、 プレースホルダー(placeholder)の位置を中央にしています。

::placeholder {
	text-align: center;
}

Microsoft Edgeで古いバージョン（2020年1月以前） の場合は次のように指定します。

/* Edge 79 より前の場合*/
::-ms-input-placeholder {
	text-align: center;
}

paddingプロパティによる位置指定はブラウザによる

「text-align」プロパティでは 「中央・左・右」といったざっくりとした位置を指定できますが、 「padding」プロパティを使用するともっと細かい位置指定ができます。

ただし「padding」プロパティが機能するブラウザと、 機能しないブラウザがあるので注意が必要です。
試してみたところ、Google ChromeやMicrosoft Edgeでは機能しましたが、 Firefoxでは機能しませんでした。

今後ブラウザの仕様が変わる可能性もありますので、 「padding」プロパティを使う場合は事前に確認してください。