submitボタンのデザインがiPhoneだけおかしい!でハマった時の対処法

「submit」が何故か、PCサイトやデベロッパーツール上でのデザインでは問題ないのに、iPhoneでだけ意味のわからんデザインになりハマった話。 Tips
この記事は約2分で読めます。
スポンサーリンク

最近、ウェブサイト制作時に実機で確認する事が少なくなってます。
Chromeデベロッパーツールが便利すぎて、もうスマホのデザインもほぼデベロッパーツールだけで確認して済ませてたのですが、先日それで問題が発生し対処に時間がかかったのでメモ。

お問い合わせページや資料請求などのページで使う「submit」。
これが何故か、PCサイトやデベロッパーツール上でのデザインでは問題ないのに、iPhoneでだけ意味のわからんデザインに。

iOSのデフォルトデザインなのですが、気づかず何度もハマってます・・・
サクッと解決できるのでご紹介。

スポンサーリンク

 

input要素がiOSだけ変なデザインになる原因

webkit系のブラウザ(SafariやChromeなど)のインプット要素にデフォルトで当たっているCSSが原因です。
リセットCSSによっては無効化されている場合もありますが、iPhoneだけ変だぞ!という時はリセットCSSで無効化されていないという事ですね。
ボタンが、角丸、グラデーションになります。
せめてもうちょいオシャレなデザインにしてくれてたら・・・

 

 

回避策

このデフォルトのスタイルをリセットすれば解決します。簡単ですね。

 

 

簡単な方法

ではリセットの書き方。

input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
}

たったこんだけ!
デモページ作りました。

上が今回ハマった感じボタン、下が上記CSSを追記したボタンです。

デベロッパーツールで見た時はコレ。

Chromeデベロッパーツールでの見た目

上も下も同じ。

でも実機はコレ。

iPhoneでの見た目

上、おかしい。

 

 

さいごに

すごく簡単な事ですが、普段リセットCSSを使っているところを、使わず制作していて引っ掛かり、「なんでや~!!」と時間を費やしてしまいました・・・
リセットCSSの必要性を改めて実感したできごとでした。

他にも普段から何気なく使っているテンプレートやライブラリって、知らないところでこうして助けてくれているんだろうなと思うと、パイオニアのみなさまには頭が上がりません。
みんなのおかげで、みんなに助けられて制作できているんだなぁ。

そのうち技術も知識も無くてもサクッとサイトも作れるようになるんだろなぁという危機感(既に結構そういうサービスもありますが、もっと複雑な事も簡単にできてしまう日が来るという意味で)も同時に芽生えましたとさ。

たきお

うぇぶめも。運営者のたきおです。
ジョギング・草野球が趣味のデブです。

2019年、ダイエットも兼ねてフルマラソンサブフォーを目指す事にしました。このブログではマラソンの目標達成を目指す日々や自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。

ツイッターではブログの運営報告等を発信しています!
小太りウェブ屋ブロガーたきお( @webmemo2014 )
フォローして頂けると励みになります♪

もっと詳しく

フォローしてくれると、うれしい。

ブログランキングに参加しました!
楽しめましたらぽちっと応援お願いします♪

にほんブログ村 その他スポーツブログ マラソンへ  
PVアクセスランキング にほんブログ村

Tips
スポンサーリンク
フォローしてくれると、うれしい。
うぇぶめも。

コメント