1

背景

inputタグのplaceholder文字サイズを、通常の入力文字サイズより小さくしたかった。
そこで、以下のようなcssを適用した。

input {
  max-height: 40px;
  padding: 8px;
  font-size: 32px;
}
input::placeholder {
  font-size: 16px;
}

このスタイルでinputの見た目を確認したところ、Safari, Firefoxでのplaceholderは上下中央に配置されていたが、Chromeはplaceholderが上下中央よりも少し下に配置されていた。
画像の説明をここに入力

聞きたいこと

  • Chromeのplaceholder文字位置を上下中央に戻す方法を知りたい。
    -- Safari, FireFoxも上下中央を維持した状態。

試したこと

::-webkit-input-placeholderで、Chromeだけ無理やり中央に移す

結果としては、Chromeは上下中央になったが、今度は逆にSafariのplaceholderが中央より上に配置されてしまった。

input {
  max-height: 40px;
  padding: 8px;
  font-size: 32px;
}
input::placeholder {
  font-size: 16px;
}
input::-webkit-input-placeholder 
  position: relative;
  top: -4px;
}

画像の説明をここに入力

1 件の回答 1

3

Google Chrome はプレースホルダを周辺のベースラインに沿って配置するようなので、おかしな動作とは言い難い感じです。

vertical-align: middle も効かないようなので、

  • 気にしないで放置する
  • Google Chrome のときだけ position:relative; top:-4px を適用するよう工夫する

でいいと思います。

1
  • ご回答ありがとうございます。となるとやはり、Chromeだけに適用するよう工夫する必要があるのですね。ブラウザ別にCSSを適用する方法もあるようなので、こちらを参照しながらChromeだけにCSS適用しようと思います。 Commented 2022年8月24日 1:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。