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

「submit」が何故か、PCサイトやデベロッパーツール上でのデザインでは問題ないのに、iPhoneでだけ意味のわからんデザインになりハマった話。

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

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

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

[ad]

 

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

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

 

 

回避策

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

 

 

簡単な方法

ではリセットの書き方。

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

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

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

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

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

上も下も同じ。

でも実機はコレ。

iPhoneでの見た目

上、おかしい。

 

 

さいごに

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください