React+TypeScript项目移动端date输入框显示异常求助

问题背景 #

使用React、TypeScript和Tailwind CSS开发Todo应用，Ubuntu 22.04.2 LTS系统下Chrome桌面端date类型输入框显示正常，但移动端Chrome和Edge中显示异常，添加placeholder后问题未解决。

显示效果 #

• 移动端异常显示：
• 桌面端正常显示：
• 期望移动端显示效果：

相关代码片段 #

输入框代码：

<input
  required
  name="date"
  value={taskObj.date}
  onChange={(e) => onChange(e)}
  type="date"
  placeholder="mm/dd/yyyy"
  min={new Date().toISOString().split("T")[0]}
  className="input-box inline-flex justify-center sm:block md:col-span-1"
/>

表单容器代码：

<form
className="grid w-full gap-2 py-3 md:grid-cols-4 xl:w-full 2xl:w-2/4"
onSubmit={onInputSubmit}
>

自定义Tailwind样式：

.input-box {
  @apply rounded-lg border border-slate-900 p-2 text-lg md:text-xl;
}

代码位置：项目src/components/Inbox.tsx第97行

解决方案 #

1. 移除冲突的flex布局 #

移动端date输入框自带浏览器默认交互控件，inline-flex和justify-center会破坏其内部布局结构，直接移除这些样式：

<input
  required
  name="date"
  value={taskObj.date}
  onChange={(e) => onChange(e)}
  type="date"
  placeholder="mm/dd/yyyy"
  min={new Date().toISOString().split("T")[0]}
  className="input-box md:col-span-1"
/>

2. 强制设置输入框宽度 #

移动端grid布局下输入框可能被挤压，给.input-box添加宽度保证足够空间：

.input-box {
  @apply rounded-lg border border-slate-900 p-2 text-lg md:text-xl w-full;
}

或者直接在输入框className中追加w-full：

className="input-box w-full md:col-span-1"

3. 明确移动端grid布局列数 #

给表单容器明确指定移动端为单列布局，避免自适应导致的空间不足：

<form
className="grid grid-cols-1 md:grid-cols-4 w-full gap-2 py-3 xl:w-full 2xl:w-2/4"
onSubmit={onInputSubmit}
>

4. 重置浏览器默认样式（可选） #

部分移动端浏览器对date输入框有特殊默认样式，可通过重置样式统一表现：

input[type="date"] {
  @apply appearance-none box-border;
}

内容的提问来源于stack exchange，提问作者Md Adnan