デザイン

iphone の safari で submitボタン のCSSがおかしい時の対処

iphone
Pocket

質の悪い記事で申し訳ない。
どうしてもこれはメモしておきたいので対処法メモとして記載しておきます。

最近、何かとレスポンシブデザインで構築する私、iphoneでの実機動作確認で見逃してしまうのが、フォームなどを作成してsubmitボタンの表示ズレ

submitのCSSをゴリゴリ記述してもiPhoneでは どうしても丸角のださいデザインがデフォルトで表示されてしまいます。

そこでGoogle先生に聞くと一発でした。
inputタイプsubmitのcssに下記webkit系CSSを記述すれば解除されPCで表示されているのと同じになります。

-webkit-appearance: none;

参考記事

CSS|iPhoneでsubmitボタンのテキストがずれた時の対応方法

appearance-CSS3リファレンス

Pocket