CSS
iPhoneでsubmit要素にスタイルが効かないときの対処法
2020年07月10日 8:00
おはようございます！社員Aです。
今回は、iPhoneでsubmit要素にスタイルが効かないときの対処法をご紹介します。
iPhone実機で確認すると、submit要素が勝手に角丸に…
最終チェックの段階で、つまずきやすいのがiPhone実機での確認。
PCでは問題なく表示されていた部分も、iPhone特有のバグが生まれたりします。
今回はそんな中でもよくある、フォームのsubmit要素（送信ボタン）にスタイルが効かないときの事例をご紹介します。
よくあるiPhone（Safari）のsubmit要素（送信ボタン）
CSSでスタイルを適用させたはずなのに、いざiPhoneでチェックするとiPhone特有のスタイルが優先されてしまっている事例です。
- 背景がグレーがかったグラデーションになる
- 角丸になる
せっかく見やすいデザインをしていても、スタイルが効かないと意味がないですよね。
CSSのappearanceを使ってリセットする
今回使うのは、CSSの「appearance」。
appearanceとは
ユーザーが使用しているOSに基づいて、標準的なUIの外観にします。
実際のCSS
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
submit要素に対して、
- -webkit-appearance: none
- border-radius: 0
を指定することで、iPhoneでも希望通りのUIが適用されます。
submitだけでなく、input要素やbutton要素にも活用できます。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
