iPhone（iOS Safari）における input タグの角丸問題とその対策

iOS Safari では、inputタグにデフォルトで角丸（border-radius）が自動適用されており、デザインの意図と異なる表示になることがあります。特に、UIの一貫性が求められるデザインでは無視できない問題です。

■ 解決方法

方法①：最低限のスタイルリセット

input {
    -webkit-appearance: none;
    border-radius: 0;
}

効果：iOS特有の角丸を無効化
推奨用途：既存のスタイルを活かしたい場合

方法②：完全カスタマイズ

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 1px solid #ccc;
  padding: 8px;
  background: white;
}

効果：各ブラウザのデフォルトスタイルを除去して、意図した外観を明示的に指定
推奨用途：フォーム要素全体をカスタムデザインする場合

方法③：特定の input タイプに限定適用

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"] {
    -webkit-appearance: none;
    border-radius: 0;
}

効果：影響範囲を限定し、他のフォーム要素（例：range, checkbox）には影響を与えない
推奨用途：必要最低限の修正を行いたい場合

注意点

・iOSのバージョンによっては、より詳細なスタイルリセットが必要な場合があります

・テスト時は異なるiOSバージョンで確認してください

・影やその他の効果を使用している場合、追加のスタイルが必要になる可能性があります

結論

iOSのinput角丸問題は、CSSでのスタイルリセットで解決可能です。ただし、プロジェクトの目的・対象ユーザーに応じて適用範囲や方法を使い分けることがポイントです。