初期状態 Native
iOSが勝手に描画する標準フォーム表示
Date
Select
Time
Text
無効化後 Reset
-webkit-appearance: none を適用
Date
Select
Time
Text
確認ポイント
| 項目 | 見る場所 | 判断 |
|---|---|---|
input[type="date"] |
左右のDate行 | 左だけ丸い・グレー・余白が大きいなら、iOSネイティブ表示の影響です。 |
select |
左右のSelect行 | 右側は標準矢印を消して、自前の▼を表示しています。 |
font-size: 16px |
全フォーム | iOSの入力時ズームを避けるため、16px以上にしています。 |
API Signal側へ最小限入れるCSS
input[type="date"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 100%;
min-height: 44px;
color: #000 !important;
background: #fff !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 16px;
line-height: 1.5;
padding: 8px 12px;
box-sizing: border-box;
text-align: center;
}
input[type="date"]::-webkit-date-and-time-value {
text-align: center;
color: #000;
}