入力欄やボタンがiOSで勝手な見た目になるときの対処

iOSが独自スタイルを当てる仕組み

iOSのSafariは、input・textarea・button・selectなどのフォーム部品に対し、OS標準に近い見た目を自動で適用します。角丸、内側の影、押したときのハイライトなどがCSSの指定を上書きしてしまうのです。

特にsearchやsubmitボタンでは、背景グラデーションや独自の角丸が強く効きます。意図したフラットなデザインが反映されず崩れて見える原因になります。

appearanceでリセットする

標準の見た目を解除するにはappearance:none;を使います。互換のため-webkit-appearance:none;も併記しておくと安全です。これでブラウザ標準のスタイルが外れ、自分のCSSが効くようになります。

リセット後は背景・枠線・角丸・余白が初期化された素の状態になるので、border・border-radius・paddingを改めて自分で指定し直す必要があります。リセットしただけだと逆に味気ない見た目になる点に注意してください。

症状別チェック表

入力欄やボタンがiOSで勝手な見た目になるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

入力時のズームと角丸の落とし穴

iOSでは入力欄のフォントサイズが16px未満だと、タップ時に画面が自動でズームします。これでレイアウトが崩れて見えることがあるため、入力欄のfont-sizeは16px以上にしておくのが定番の回避策です。

checkboxやradioにappearance:none;を当てると標準の見た目が完全に消え、何も見えなくなります。これらをカスタムする場合は、リセット後に背景やチェックマークの装飾を自分で作り込む前提で進めましょう。

リセットして整える手順

崩れを直すときは、リセットと再構築をセットで行うのが基本です。次の順番で進めると漏れがありません。

1. 対象の部品にappearance:none;と-webkit-appearance:none;を指定する
2. border・border-radius・background・paddingを自分で再指定する
3. 入力欄のfont-sizeを16px以上にしてズームを防ぐ
4. タップ時のハイライトが不要ならその挙動も調整する
5. checkbox等はリセット後にカスタム装飾を作り込む

PCとの差は実機で確認するのが確実

フォームの見た目はPCのブラウザの開発者ツールだけでは再現しきれません。iOSのSafari特有のレンダリングは、最終的に実機で見ないと判断できないことが多いからです。デバッグ時間を短くするには、実機で見える状態を素早く共有する仕組みがあると便利です。

ギガサイト便なら、修正したフォームのHTMLをドロップして発行された〇〇.giga-site.comのURLをiPhoneで開けば、実機の見た目をその場で確認できます。HTTPSは自動なので、フォーム挙動の検証でも安全に開けます。同じURLのまま差し替えできるので、調整と実機確認を何度も繰り返せます。