

## 背景

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

[code]

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

このスタイルでinputの見た目を確認したところ、Safari,
Firefoxでのplaceholderは上下中央に配置されていたが、Chromeはplaceholderが上下中央よりも少し下に配置されていた。  
[![画像の説明をここに入力](https://i.stack.imgur.com/qZspm.png)](https://i.stack.imgur.com/qZspm.png)

## 聞きたいこと

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

## 試したこと

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

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

[code]

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

[![画像の説明をここに入力](https://i.stack.imgur.com/3KFix.png)](https://i.stack.imgur.com/3KFix.png)


CC BY-SA 4.0
2022-08-23T16:01:21.447
90722
2022-08-23T22:04:52.893
2022-08-23T16:35:14.377
47990
47990
question
css
inputタグにてplaceholderの文字サイズを小さくした時の、Chromeの挙動がおかしい


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

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

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

でいいと思います。


CC BY-SA 4.0
2022-08-23T22:04:52.893
90724
2022-08-23T22:04:52.893
3475
90722
answer