inputタグのボタンがレスポンシブ実装時に自動でデザイン変更されてしまう現象を防ぐ

はじめに

HTMLなどでフォームを作る際にスマートフォンのフォームデザインが勝手に変わっていることがある。

筆者の場合、HTML, PHPを用いてフォームを作成した時、PCでは自分で考えたデザインが反映されたのに対して、スマートフォンで実機確認するとボタンのデザインが変わっていた。

解決方法

レスポンシブで自動でデザインが反映されたタグやクラスに対して、
-webkit-appearance: none;
border-radius: 0;
二つのプロパティを付ける。

（例）ブラウザによってボタンに自動で付けられた装飾を消去する

<input type="submit" type="cofirm" value="送信" class="c-btn">

該当するクラスがあるcssファイルにプロパティを適用する。

.c-btn {
　-webkit-appearance: none;
　border-radius: 0;
}

これで、レスポンシブ実装の時に自動でデザインが変わる現象を防げる。

P.S.

今回はこのプロパティを適用すれば防止できるよ〜という記事。
ブラウザが勝手にプロパティを付与する理由には調べている途中なので記載していません。