iOS Safariでinput type=dateの
幅が崩れる問題と対策

はじめに

検索条件フォームで「都道府県」のセレクトと「来店日」の日付inputを横並びに置いた。PCのChromeでは2つとも問題なく収まる。ところがiPhoneで開くと、日付inputだけが横幅の枠からはみ出して、隣の要素やコンテナの境界線を突き破って表示される。

セレクトボックスはCSSでの見た目調整に特に問題はありません。崩れるのはinput type="date"だけです。iOS Safariの日付inputが持つネイティブUIの内部構造が原因で起きる、実機でしか確認できない問題です。

何が起きているか

input type="date"は見た目上は1つの入力欄ですが、内部は「年」「月」「日」とカレンダーアイコンに分かれたネイティブUIの複合パーツです。iOS Safariはこの内部パーツがそれぞれ収まるための最小限の幅を要求しており、width: 100%を指定しても、横並びレイアウトで割り当てられた幅がその最小幅より狭いと、コンテナを無視して広がってしまうことがあります。

/* widthを指定してもネイティブUIの最小幅が優先される場合がある */
input[type="date"] {
  width: 100%;
}

<select>は文字列とシンプルな矢印を描くだけの構造なので、この種の最小幅の制約を受けず、CSSの指定どおりに縮みます。日付inputだけがこの問題を抱えているのは、内部構造の複雑さの違いによるものです。

なぜChromeのDevToolsで気づかないのか

ChromeのDevToolsのモバイルシミュレーターは「画面サイズとUser-Agentを変えたChrome」であり、input type="date"の描画エンジン自体はPCのChromeと同じものを使います。iOS SafariのWebKitが持つネイティブUIの内部構造や最小幅の制約は再現されません。

この問題は実機のiPhoneで、しかも横並びレイアウトのように幅が狭くなる条件で確認しないと気づけません。PCのChromeで確認しただけでは「問題なし」に見えてしまいます。

2つのパターンで確認する

下の2つは同じ「都道府県」セレクトと「来店日」日付inputを横並びに置いたものです。Chrome Desktopでは幅の違いとして再現しづらいため、可能であればお手元のiPhoneで開いて、日付inputの幅が枠内に収まっているか確認してください。

対策1：ネイティブUIのまま使うなら幅に余裕を持たせる

もっとも手間がかからない対策は、日付inputを横並びの狭いレイアウトに置かないことです。1行に1つだけ配置するか、横並びにする場合は十分な幅（目安として最低150px程度）を確保します。

/* 横並びにする場合は日付inputに十分な幅を確保する */
.form-row {
  display: flex;
  gap: 12px;
}

.form-row input[type="date"] {
  flex: 0 0 auto;
  min-width: 150px; /* ネイティブUIの最小幅を下回らないようにする */
}

ネイティブUIのまま使えば、標準のカレンダーアイコンや操作感がそのまま残るのが利点です。検索条件フォームのように項目数が多く、各フィールドに十分な幅を割り当てられる画面ではこちらが向いています。

対策2：appearance: noneで自前デザインに置き換える

狭い横並びレイアウトにどうしても収めたい場合は、appearance: noneでネイティブUIの内部構造を無効化し、見た目をテキスト入力欄として描画させます。width: 100%の指定どおりに縮むようになり、コンテナをはみ出さなくなります。

input[type="date"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #D0D7E0;
  border-radius: 6px;
  padding: 8px 32px 8px 12px; /* 右側に自前アイコン分の余白を確保 */
  font-size: 16px; /* iOS Safariの自動ズーム対策も兼ねる */
  background-image: url("calendar-icon.svg"); /* 標準アイコンの代わりに自前アイコンを表示 */
  background-repeat: no-repeat;
  background-position: right 12px center;
}

標準のカレンダーアイコンは消えますが、フィールド自体はtype="date"のままなので、タップすれば標準の日付ピッカーがそのまま開きます。見た目だけが変わり、機能は維持されるトレードオフです。

まとめ：どちらを選ぶか

iOS Safariの日付input（type="date"）が幅から崩れる問題は、ネイティブUIの内部パーツが要求する最小幅が、横並びレイアウトで割り当てた幅より広い場合に起きます。<select>はこの問題を抱えないため、対象は日付inputに絞って考えれば十分です。

レイアウトの幅にどこまで余裕があるかで選び分けるのがおすすめです。どちらを選ぶ場合も、必ず実機のiPhoneで横並びの幅が崩れていないか確認してから公開してください。

関連するUI事例

日付選択・セレクトボックスのUI事例です。狭いレイアウトでも崩れない構成のヒントとして参考にしてください。

• 日付選択（DatePicker）
• DatePicker（Flatpickr）— 日付範囲選択・カスタムデザイン
• セレクトボックス（ドロップダウンリスト）
• iOS Safari のフォーム自動ズームを止める方法