Windows 上 Chrome 中的日期输入宽度答案

【问题标题】：Date input width in Chrome on WindowsWindows 上 Chrome 中的日期输入宽度
【发布时间】：2013-01-03 23:55:31
【问题描述】：

这个小提琴显示了我的问题：http://jsfiddle.net/jmTqk/2/。蓝色块遮挡了旋转按钮和日期选择器下拉链接。但我认为你需要在 Windows Chrome 上才能看到它。这里是没有蓝块的版本http://jsfiddle.net/jmTqk/1/

这个 HTML

<input id='date1'   type="date" />  
<div id='abcd'>blue block</div>

还有这个 CSS

  #date1 {
    width:6em;
    border: 1px solid red;
  }
  #abcd {
    background-color:blue;
    height:150px;
    width:150px;
    display:inline-block;
  }

如果您将输入的宽度更改为 11em，则它适合。

在 Ubuntu Chrome 上，css 将日历下拉按钮限制在日期输入字段的内部。在 Windows（XP，7）上它没有。有没有办法让旋转按钮和下拉菜单尊重 Windows 上日期输入的范围并适合红框？

【问题讨论】：

似乎元素具有最小所需宽度。我将元素视为narrow as possible and then a red box 将其切断。您可以使其更宽，但不能小于最小值。
啊，这太糟糕了。它在 Win 7 上看起来也确实有问题。我应该修正这个标题。

标签： css windows google-chrome windows-7 windows-xp

【解决方案1】：

这是一个 chrome 错误，您可以在此处阅读：

https://code.google.com/p/chromium/issues/detail?id=172029

【讨论】：

【解决方案2】：

我通过禁用 Chrome 日期选择器控件进行了修复。这适合你吗？

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator { 
    display:none;
    -webkit-appearance: none;
    margin: 0;
}

jsFiddle demo

【讨论】：