iPhoneでsubmit要素にスタイルが効かないときの対処法

CSS

2020年07月10日 8:00　

おはようございます！社員Aです。

今回は、iPhoneでsubmit要素にスタイルが効かないときの対処法をご紹介します。

最終チェックの段階で、つまずきやすいのがiPhone実機での確認。

PCでは問題なく表示されていた部分も、iPhone特有のバグが生まれたりします。

今回はそんな中でもよくある、フォームのsubmit要素（送信ボタン）にスタイルが効かないときの事例をご紹介します。

CSSでスタイルを適用させたはずなのに、いざiPhoneでチェックするとiPhone特有のスタイルが優先されてしまっている事例です。

せっかく見やすいデザインをしていても、スタイルが効かないと意味がないですよね。

今回使うのは、CSSの「appearance」。

appearanceとは

ユーザーが使用しているOSに基づいて、標準的なUIの外観にします。

input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
}

submit要素に対して、

を指定することで、iPhoneでも希望通りのUIが適用されます。

submitだけでなく、input要素やbutton要素にも活用できます。

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺