css - 输入类型日期在设备上看起来与 Chrome 模拟器不同

Question

我正在尝试访问移动平台上的 native 日期选择器。我用了input type="date"并根据设计对其进行样式化。在 iPhone 上测试后， native 日期选择器运行良好，但日期输入看起来与 Chrome 移动设备模拟器不同。 iPhone 上的不同浏览器显示日期输入的方式与 Chrome 相同，因此它似乎不是浏览器的问题。你有这方面的经验吗？任何帮助将不胜感激。

HTML:

<input type="date" />

样式:

input[type=date] {
  height: 40px;
  padding: 12px 6px;
  width: 100%;
  font-size: 14px;
  border: 1px solid #d2d6d9;
  border-radius: 3px;

  /* Hide arrow */
  &::-webkit-inner-spin-button,
  &::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

}

显示日期输入的区别:

Answer 1

使用-webkit-appearance: none;如下图:

input{
   -webkit-appearance: none;
}