macOS/iOSのSafariでinput type=textのplaceholderが上にずれるのを修正する

1px単位で気をくばれるのが正しきデザイナーの気構え。しかし、なんか、iPhoneのSafariでinput type=textのplaceholderが上にズレてて気持ち悪い…と思ったらMacのSafariでもずれてました。というわけで、解決法。

1行で解決。


// @your-style.scss

[type=text] {
  // Safariでplaceholderが上にずれないようにするFix
  line-height: normal; // ←これだけ

  // 備考
  height: 3rem; // 高さはheightでok
  padding: {
    left: 12px;
    right: 12px;
  } // 横の余白はpaddingで
}

normalize.cssなどを使っている場合、line-height: 1.5; などと指定されていて、この現象が起こる原因となります。

この記事が気に入ったら、シェアしよう