15

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

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

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

4

4 回答 4

16

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

我不知道自定义样式输入但也保留箭头的方法。

于 2013-08-22T21:36:46.780 回答
9

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

于 2014-02-19T13:49:35.893 回答
7

如果您只想选择input[type='date']并input[type='time'] 尝试此 CSS 行。

input[type='date'], input[type='time'] {
    -webkit-appearance: none;
}
于 2016-06-18T13:23:41.930 回答
3

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

-webkit-min-logical-width: calc(100% - 16px);
于 2018-03-15T15:33:29.383 回答