【コード１行でOK！】スマホで”送信ボタン”の見た目が変わってしまった時の対処法

web制作
2022.03.28
記事内に広告が含まれています。

こんにちは、れももです。
お問い合わせフォームを実装した後、見た目を確認するためにスマホで表示してみたところ
あれ？スマホだと送信ボタンのデザイン違うぞ、、、？
パソコンではデザイン通り表示されているのに、スマートフォンだと表示が変わってしまっていました。

れもも
れもも

デベロッパーツールでスマホ表示確認ちゃんとしたのに、、、なんで〜？？

今回はこのボタンのデザインが変わってしまう原因と対処法についてメモしていきたいと思います。
おそらく次この現象が発生した頃には、対処法なんだったけ？と忘れてしまっていると思うのでこの記事を見返してすぐに思い出せるように書き留めておきます＾＾

プロフィール

れもも(@lamoneido)と申します。2021/12〜本業休職をきっかけにweb制作の学習を始めました。先日デイトラweb制作コースの卒業制作を終えました。これからshopifyコースも控えています＾＾

Lemomo. 神奈川のWEBサイト制作者
Lemomoは神奈川県横浜市を中心に活動しているフリーランスのWEB制作者です。WEBデザイン・コーディング、ECサイト制作、サイト保守運用などWEBのことなら何でも対応可能です。お客様の目的を達成するためのWEBサイト作りを行います。お気軽にお問合せください。
lemomo-works.com

【原因】なぜスマホだと見た目が変わってしまうのか？

まずこの現象については私のコードの書き方が悪いわけではなく、iOSのデフォルトスタイルが適用されてしまっていることが原因みたいです。
iOSでのデフォルトスタイルなのでAndroidや他のスマートフォンでは問題なくiPhoneでこの現象が発生するみたいです。iPhoneで実際に表示確認できない人は気づかない人もいるかもしれないですね。
パソコンのデベロッパーツールでスマホ表示の確認できますが、それだと問題なく表示されてしまうので厄介です。

れもも
れもも

iPhoneだけデフォルトスタイルが適用されてしまうんですね、、、
表示変わらないようにするにはどうすればいいんだろう？

【対処法】見た目が変わらないようにするためにはどうすればいいのか？

では見た目が変わらないようにするためにはどうすればいいのでしょうか？
調べたところ対処法は2種類あります。

対処法①：デフォルトスタイル適用を回避する

iOSのデフォルトスタイルを適用させないことでこの現象を防ぐことができます。
CSSで該当するボタンスタイルに「-webkit-appearance: none;」の1行を追加するだけで見た目が変わらないようにできます。

れもも
れもも

CSSに1行追記するだけで大丈夫なんだね！簡単！！

デフォルトスタイルが適用されてしまったまま

//-webkit-appearance: none; の指定なし
input[type=submit] {
  font-size: 28px;  
  color: #FFF;
  width: 300px;
  height: 80px;
  background-color: #D9AB35;
  border-radius: 10px;
}

デフォルトスタイル適用を回避

//-webkit-appearance: none; の指定あり
input[type=submit] {
  font-size: 28px;  
  color: #FFF;
  width: 300px;
  height: 80px;
  background-color: #D9AB35;
  border-radius: 10px;
 -webkit-appearance: none;
}

対処法②：buttonタグを使用する

ボタンのHTMLタグを<input>タグではなく<button>タグを使用することでiOSでも見た目が変わらないようにすることができるようです。
どうやらこのデフォルトスタイルが適用されてしまう現象は<input>タグで発生するようなので<button>タグにするだけでもOKです。

れもも
れもも

こっちのやり方もめちゃくちゃ簡単ですね！すぐに対処できてよかった＾＾

まとめ

<input>タグでボタンを設定した際はiOSではデフォルトスタイルが適用されてしまいます。
デフォルトスタイルが適用されないようCSSボタンスタイルに「-webkit-appearance: none;」の1行を追加するもしくは<input>タグではなく<button>タグを使用することでデフォルトスタイル適用を逃れましょう。

また、iOSでデフォルトスタイルが適用されてしまう現象は他にもあるみたいなので注意が必要です。下記記事に他の事例も書かれていましたので参考に見てみてください。
↓↓↓
意外な落とし穴！？CSSコーディングにおける iPhone での注意点・3つの事例

コメント

タイトルとURLをコピーしました