Question

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

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

有没有办法可以保持输入类型日期的基本样式，但我自己统计宽度？

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

我发现按照@Boldizsar的说法，要获得100％的正确宽度，你需要一点CSS计算动作来移除iOS上的下拉箭头所添加的宽度。

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