Tailwind+Headless UI登录弹窗在iPhone移动端出现异常灰色阴影问题

解决方案 #

• 你之前将-webkit-appearance: none加在form标签上是无效的，该属性需要作用在input、button这类具体的表单控件上才能清除iOS系统默认的表单样式。你可以直接给所有input、button添加Tailwind自带的appearance-none类，底层已经自动兼容了-webkit前缀的属性。
• 你的input控件没有显式设置背景、边框和阴影属性，iOS会自动添加默认的灰色背景、圆角阴影，给input补全以下类即可：bg-white border border-gray-200 shadow-none outline-none，如果不需要边框可以把border设为border-transparent。
• 底部的提交按钮也需要添加同样的清除默认样式的属性，避免iOS给按钮额外添加默认样式：appearance-none bg-transparent border-none shadow-none outline-none。
• 如果上述操作后还有残留的灰色效果，可以给表单控件额外添加自定义样式-webkit-tap-highlight-color: transparent，清除iOS默认的点击高亮遮罩。

修改示例 #

<input
  value={authForm.email || ""}
  onChange={(e) => handleChange(e)}
  type="text"
  name="email"
  placeholder="Email"
  className="w-full px-4 py-3 rounded-md appearance-none bg-white border border-gray-200 shadow-none outline-none"
/>

另外注意你代码里的form标签写错了，form没有type="submit"属性，把这个无效属性删掉，避免出现未知的样式异常。

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