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でのスタイルリセットで解決可能です。ただし、プロジェクトの目的・対象ユーザーに応じて適用範囲や方法を使い分けることがポイントです。
関連記事
