iOS 上 Safari 中的输入类型日期外观答案

【问题标题】：Input type date appearance in Safari on iOSiOS 上 Safari 中的输入类型日期外观
【发布时间】：2013-08-22 13:17:49
【问题描述】：

我正在尝试使用常规输入类型日期在移动设备上使用。但是 CSS 中设置的宽度被 Safari（或 webkit）否决了。

我可以将-webkit-appearance: none; 添加到 CSS 中，这样宽度就会按预期工作。但后来我失去了所有其他需要的样式，例如指示它是选择器的箭头。

有没有一种方法可以让我保留输入类型日期的基本样式，但自己控制宽度？

【问题讨论】：

【解决方案1】：

-webkit-appearance: none; 确实总是会删除选择器的典型样式...但是您可以使用 CSS 和背景图像轻松添加箭头。

我不知道有一种方法可以自定义输入样式，但还要保留箭头。

【讨论】：

【解决方案2】：

添加-webkit-min-logical-width: <your desired value>。它为我解决了问题！

【讨论】：

似乎切换箭头放置在元素之外。所以 width=100% 会变大。
如果您使用 CSS calc 并减去箭头的 16px，则效果很好。 -webkit-min-logical-width: calc(100% - 16px);

【解决方案3】：

如果您只想选择 input[type='date'] 和 input[type='time'] 试试这个 CSS 行。

input[type='date'], input[type='time'] {
    -webkit-appearance: none;
}

【讨论】：

【解决方案4】：

我发现要根据@Boldizsar 的回答获得 100% 正确的宽度，您需要一点 CSS 计算操作来删除 iOS 上的下拉箭头添加的宽度。

-webkit-min-logical-width: calc(100% - 16px);

【讨论】：