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

时间:2018-10-22 10:54:01

标签: css mobile

我正在尝试在移动平台上访问本机日期选择器。我使用了input type="date"并根据设计对其进行了样式设置。在iPhone上进行测试后,本机日期选择器运行良好,但日期输入看起来与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;
  }

}

显示日期输入的差异:

enter image description here

1 个答案:

答案 0 :(得分:0)

使用@NgModule({ imports: [ ... ], exports: [ ... ] }) export class LibCoreModule { public static forRoot(configFactory, deps = []): ModuleWithProviders { return { ngModule: LibCoreModule, providers: [ {provide: CoreConfig, useFactory: configFactory, deps: deps} ] }; } } export function coreFactory(): CoreConfig { return { api: environment.api }; } @NgModule({ declarations: [ AppComponent, // SHOWS ERROR LibCoreModule.forRoot(coreFactory, []) ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) ,如下所示:

-webkit-appearance: none;