代码之家 › 专栏 › 技术社区 › MatúÅ¡ Å Å¥astný

设备上的输入类型日期与Chrome Emulator不同

mobile css

MatúÅ¡ Å Å¥astný · 技术社区 · 7 年前

我正在尝试访问移动平台上的本机日期选取器。我使用了 input type=“date” 并根据设计对其进行了样式设置。在iPhone上测试后,本机日期选取器工作正常,但日期输入看起来与Chrome移动设备模拟器不同。iPhone上的不同浏览器显示的日期输入方式与Chrome相同,所以它似乎不是浏览器的东西。你对此有经验吗?如有任何帮助,我们将不胜感激。

html:


   
    
     
      <input type=“date”/>
      
       。
      
     
    
    
     
      
       风格:
      
      input[type=date]{
高度:40px;
填料:12px 6px;
宽度:100%;
字体大小:14px;
边框:1px实心d2d6d9;
边界半径:3px;

/*隐藏箭头*/
&:-WebKit内部数字调整按钮,
&:-WebKit日历选取器指示器{
显示:无;
-WebKit外观:无;
}

}
< /代码> 

显示日期输入的差异:

.

HTML:


<input type="date" />

Styles:

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;
  }

}


显示日期输入的差异: