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

         

CSS

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

2020年07月10日 8:00 

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

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

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

 



 

iPhone実機で確認すると、submit要素が勝手に角丸に…

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

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

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

 

よくあるiPhone(Safari)のsubmit要素(送信ボタン)

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

  1. 背景がグレーがかったグラデーションになる
  2. 角丸になる

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

 

 



CSSのappearanceを使ってリセットする

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

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

 

実際のCSS
 

submit要素に対して、

  1. -webkit-appearance: none
  2. border-radius: 0

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

 

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

 

関連記事

この記事を書いた人

社員A

社員A

入社6年目。フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。 一人旅がだいすきで、特に東南アジアを周っています。旅行が好きな方、おすすめスポットがあればぜひ教えて下さい!