Chrome中的样式输入[type=date][重复]

Question

我正在使用html5日期输入，但在新表单中Chrome没有正确显示完整值。格式是DD-MM-YYYY，但YYYY部分显示为空白。不过，我可以看到值在那里。

似乎输入右侧的空白是为控件保留的（交叉到清除值、上/下箭头、下拉箭头）。

我没有空间来扩大输入范围。如何使完整日期可见？

例子：http://jsfiddle.net/U6MYy/

<input type="date" value="2014-04-07"/>
with
input { width: 80px; }

Answer 1

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

Chrome输入日期错误

显然已修复，但无法使其在此处正常运行：

http://trac.webkit.org/changeset/141195

您现在的快速解决方案是将宽度设置为最小130px

更新：看到这个答案，它可能会帮助你：https://stackoverflow.com/a/15107073/3448527

Answer 2

我想我可能想出了一个很好的解决方案。到目前为止，我发现的唯一错误是，如果你决定保留任何工具

以下是我偏爱的解决方案：

input[type='date']{position:relative;}
::-webkit-datetime-edit, ::-webkit-clear-button, ::-webkit-calendar-picker-indicator{position:absolute;}
::-webkit-clear-button{right:1.54em;}
::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
::-webkit-calendar-picker-indicator{right:0; padding:.539em .34em;}

这将保持清除按钮（x）

这应该至少能让你到达你想去的地方。你可以在Chrome打开开发工具

根据这个答案，以下代码会在悬停时使Chrome崩溃（请注意）：

input[type="date"]::-webkit-inner-spin-button{display:none;}

Answer 3

input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
}

用户无法使用内置日历弹出窗口。