iOSでボタンのスタイルでCSSが効かずにグラデーションスタイルになってしまう対応メモ

PCのChromeF12のシミュレーターでは分からず、実機iPhoneSEで見ると、ボタンが灰色グラデーションになってしまう現象がありました。
inputでなく、button要素を使えば問題なさそうです。
現象
iOS(iPhoneSE)上では、こんなボタンになってしまいます。

実際にはこう見せたいわけです。PCのChromeでは問題なく見えています。

対応
【フォーム】iOSのボタンが角丸グラデーションになるのをリセット
こちらの記事が参考になりました。ありがとうございます。
<button type="button">次へ</button>
みたいな感じですね。
input要素を使っていたので、button要素を使うことで回避しました。
おわりに
Chromeのシミュレーターでは限界があるんだよなあということを痛感します。とはいえ、実機でテストも手間がかかりますし、なかなか難しいところですね。
ライター

- ビジネスアイデアメディア「シゴクリ」運営者。生まれてくるアイデアをビジネス化出来ないかを考え続け、アイデアの力でお客様に貢献するゼロイチ大好きアイデアマン。ビジネスアイデア相談やビジネス企画の実績多数。好きな言葉は三方良し。詳しい自己紹介、仕事実績も合わせてご覧ください。お仕事メニューやお問い合わせはお気軽にどうぞ。
最新の投稿
ビジネスアイデア2023.02.02コールセンター待ち時間を解消するビジネスアイデア
思考・考え方・メモ2023.01.22「東大式 アイデアがいままでの10倍出せる思考法」を読んでの気付きメモ
思考・考え方・メモ2023.01.20同じことは何度も書いても良い
お知らせ2023.01.20シゴクリラジオ!はじめました
ビジネスアイデア相談
店舗への集客アイデア、Webサービスのアイデア、起業・複業アイデアなどビジネスアイデアに関して幅広くご相談可能です。
「もっとアイデアがほしい」「個別に企画の相談に乗って欲しい」「この施策をどう考えるか」という方は、ぜひお気軽にお問い合わせフォームからご連絡ください。
「もっとアイデアがほしい」「個別に企画の相談に乗って欲しい」「この施策をどう考えるか」という方は、ぜひお気軽にお問い合わせフォームからご連絡ください。