MacとChromeの環境下でinputテキストエリアの文字が自動補完される現象の解決方法

MacとChormeの環境下で、inputタグ、プレースホルダーの文字が初期表示時とマウスでクリック時に違うことがあります。

今回はその現象を解決する方法を解説します。

コンテンツ

現状の問題点

この様なinputタグを作成した時に、初期状態での中身の表示とマウスでクリックしたときの文字サイズがおかしい現象になります。

本来なら文字サイズが切り替わらずにスムーズにそのまま入力できる様になるべきです。

ちなみに、FireFoxとSafariブラウザでは挙動は問題ありませんでした。

海外サイトには、Mac×Chromeで今回の記事と同様の問題が報告されており、どうやらMacとChrome特有の現象の様です。

開発環境

環境は以下になります。

環境

・OS Mac 10.15

・Chrome 85

実際のコード

修正前

実はこの現象は突き詰めるとChromeブラウザの自動補完が作動しているのが原因です。

下記は現状問題症状が発生しているコードです。

sample.html

<div>
    <dt class="input-label"><label for="">メール</label></dt>
    <dd><input id="id_email" name="email" type="text" placeholder=""></dd>
</div>

<div>

</div>

sample.css

input[type=text]{
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    border-radius: .3rem;
    border: .2rem solid #ddd;
}

input[type=text]{

width: 100%;

box-sizing: border-box;

padding: 1rem 1.5rem;

border-radius: .3rem;

border: .2rem solid #ddd;

}

こちらにあるコードを付け加えます。

修正後

sample.css

html{
    font-size: 62.5%;
    font-family: sans-serif;
}

input[type=text]{
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    border-radius: .3rem;
    border: .2rem solid #ddd;
}

input[type=text]:-webkit-autofill::first-line{
    font-family: snas-serif;
    font-size: 1.6rem;
}

html{

font-size: 62.5%;

font-family: sans-serif;

}

input[type=text]{

width: 100%;

box-sizing: border-box;

padding: 1rem 1.5rem;

border-radius: .3rem;

border: .2rem solid #ddd;

}

input[type=text]:-webkit-autofill::first-line{

font-family: snas-serif;

font-size: 1.6rem;

}

1-4行目は初期状態のリセットCSSを指す。しかしながらこの初期設定は今回の現象に影響ある範囲で、きちんと記入をしてあげないと問題を発生させる原因となる
6-12行目は変更なし
14行目は、-webkitはChromeブラウザに適用させるという意味
同じく14行目のautofillは自動補完を指す
同じく14行めの::first-lineは今回の動画でいうadminの自動補完された文字列を指す
14行目で指定したadminの箇所を15-16行目で、親要素のhtmlと同様のfont-sizeとfont-familyを書くことで全く同様にhtml上に上書きされることになる。