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

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

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

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

- 「シゴクリ」運営者。アイデアの力でお客様に貢献するゼロイチ大好きアイデアマン。ビジネスアイデア相談実績等は400超。好きな言葉は三方良し。詳しい自己紹介、仕事実績も合わせてご覧ください。お仕事メニューやお問い合わせはお気軽にどうぞ。
最新の投稿
アイデアネタ2025年7月16日普段使わない言葉から、他者の見方を学んだりしてみるといいかも
アイデアネタ2025年7月15日AI収集に対して請求できる仕組みというアイデアがあるらしい。面白い!
アイデアネタ2025年7月14日ローソンは青森にアバター接客導入。こういう動きはさらに広がりそう。
ビジネスニュースカフェ2025年7月11日ビジネスニュースカフェダイジェスト:2025年7月第2週