在iOS上的Safari中输入日期外观

Question

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

我可以添加-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;
}