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

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

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

1 現象
2 対応
3 おわりに
- - 3.0.1 記事を書いた人

現象

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

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

対応

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

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

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

みたいな感じですね。

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

おわりに

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

記事を書いた人

シゴトクリエイター　大橋　弘宜

ビジネスアイデアメディア「シゴクリ」運営者。まずアイデアを出すアイデアセッターであり、生まれてくるアイデアをビジネス化出来ないかを考え続け、手を動かすゼロイチ大好きアイデアマン。ビジネスアイデア相談やビジネス企画の実績多数あり。毎日生まれるアイデアから世のために貢献していくスタイルです。好きな言葉は三方良し。詳しい自己紹介、仕事実績も合わせてご覧ください。お仕事メニューやお問い合わせはお気軽にどうぞ。