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

PCのChromeF12のシミュレーターでは分からず、実機iPhoneSEで見ると、ボタンが灰色グラデーションになってしまう現象がありました。

inputでなく、button要素を使えば問題なさそうです。

現象

iOS(iPhoneSE)上では、こんなボタンになってしまいます。

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

対応

【フォーム】iOSのボタンが角丸グラデーションになるのをリセット

こちらの記事が参考になりました。ありがとうございます。

<button type="button">次へ</button>

みたいな感じですね。

input要素を使っていたので、button要素を使うことで回避しました。

おわりに

Chromeのシミュレーターでは限界があるんだよなあということを痛感します。とはいえ、実機でテストも手間がかかりますし、なかなか難しいところですね。

ビジネスアイデア相談

店舗への集客アイデア、Webサービスのアイデア、起業・複業アイデアなどビジネスアイデアに関して幅広くご相談可能です。

「もっとアイデアがほしい」「個別に企画の相談に乗って欲しい」「この施策をどう考えるか」という方は、ぜひお気軽にお問い合わせフォームからご連絡ください。