Question

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

看起来好像输入右侧的空白区域是为控件保留的（交叉到清除值，上/下箭头，下拉箭头）。

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

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

Answer 1

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

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

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）和＆amp;下拉箭头，但删除那些讨厌的箭头。

这至少可以让你到达目的地的一部分。您可以在Chrome和＆amp ;;中打开Dev Tools。设置＆gt;元素＆gt;显示用户代理shadow DOM。从这里你可以玩风格来找到你想要的。

根据此answer，以下代码在悬停时崩溃Chrome（因此请注意）：

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

Answer 3

这是一个铬虫，你可以在这里阅读：

Chrome Input Date Bug

显然是固定的，但无法设法让它在这里发挥作用：

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

您现在的快速解决方案已将width设置为最小130px

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

在chrome中设置输入[type = date]的样式

3 个答案: