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

Question

我想使用普通的日期输入类型来在移动设备上使用，但是CSS中设置的宽度被Safari（或webkit）覆盖。

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

有没有办法保留输入类型日期的基本样式，但自己控制宽度？

- SamJ

---

一个有趣的问题。我也一直在思考为什么 Webkit 会有这样的行为。 - Daniel Hallqvist

你尝试过添加important!吗？ - Daniel

另外，请查看这个问题：https://dev59.com/HG035IYBdhLWcg3wHsOR - Daniel

是的，我已经尝试使用!important，但没有任何区别。 - SamJ

Answer 1

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

据我所知，没有方法可以自定义样式输入框并保留箭头。

- Dion

---

是的，这就是我解决这个问题的方法。看起来只是改变元素的宽度似乎有些过度，但可能没有其他方法。非常感谢！ - SamJ

Answer 2

添加 -webkit-min-logical-width: <您所需的值>。这对我解决了问题！

- Boldizsar

---

似乎切换箭头放在元素外面。所以，width=100%会使它太大。 - sbaechler

如果您使用CSS calc并减去箭头的16px，则可以完美地实现此效果。-webkit-min-logical-width: calc(100% - 16px); - Phil Cook

Answer 3

如果您想只选择input[type='date']和input[type='time']，请尝试以下CSS代码。

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

- eclaude

Answer 4

我发现根据@Boldizsar的答案，要正确设置100%宽度，您需要使用一些CSS计算操作来删除iOS下拉箭头添加的宽度。

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

- Phil Cook