为什么日期输入仅在 iphone 上被压缩？

Question

在桌面上，它看起来不错：

但是在 iPhone 上，即使输入应该占据父 div 的整个宽度，日期也会折叠起来。这是屏幕截图：

我缺少什么 CSS 特质？

<div className="mb-6">
                <div className="relative">
                  <span className="absolute p-2.5">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      height="24px"
                      viewBox="0 0 24 24"
                      width="24px"
                      className="fill-black dark:fill-white"
                    >
                      <path d="M0 0h24v24H0V0z" fill="none" />
                      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z" />
                    </svg>
                  </span>
                  <input
                    className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    id="date-input"
                    type="date"
                    value={date}
                    onChange={(e) => setDate(e.target.value)}
                  />
                </div>
              </div>

Answer 1

iOS Webkit 正在尝试添加自己的样式。如评论和 this post 中所述，删除默认外观有效。此外，class="appearance-none" 和 Tailwind css 也很有效

为什么日期输入仅在 iphone 上被压缩？

Why is the date input squished on iphone only?

iphone

webkit

reactjs

next.js

tailwind-css