为什么`input type =“date”的行为发生了变化？

Question

Chrome中的<input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8">日期输入用于允许用户查看“弹出式”日历以帮助选择日期。我昨天注意到行为已经停止;输入仅允许用户向上/向下箭头日期部分（月/日/年）。我访问了Chrome博客并运行了Google搜索，但无法找到任何关于此更改的提及。 为什么input type="date"的行为发生了变化？奇怪的是，这种变化似乎仅限于Bootstrap，因为http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date仍然展示了日期选择器。

Answer 1

<强>更新 Chromium团队接受了该错误并提交了patch back to WebKit。 更改的要点是，无论应用于输入[type ='date']控件的样式如何，日期控件都将呈现在灵活的box元素内。

---

我是那个that reported the defect referenced here to Chromium。一个建议的解决方案是应用display：inline-block;到日历选择器：

input[type="date"]::-webkit-calendar-picker-indicator{
    display:inline-block;
}

然而，这是一个不稳定的解决方案，因为控件仍然转移到输入[type =“date”]控件上右对齐的位置。

另一种选择是向右浮动：

input[type="date"]::-webkit-calendar-picker-indicator {
    display:inline-block;
    margin-top:2%;
    float:right;
}
input[type="date"]::-webkit-inner-spin-button {
    display:inline-block;
    float:right;
}

这会产生反转微调器和日历选择器控件的副作用。

最好的黑客，我认为是删除微调器并向右浮动：

input[type="date"]::-webkit-calendar-picker-indicator{
    display:inline-block;
    margin-top:2%;
    float:right;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}

Answer 2

<强>更新

发现问题

Bootstrap使用2个样式属性..

1 - 显示：inline-block ，这会让Google将箭头分成另一行

2 - 身高：20px 会阻止您看到此“行”

Answer 3

<强>更新

Google Chrome问题被标记为回归，所以希望很快就会修复。 作为临时解决方法，以下内容将起作用：

input[type=date]::-webkit-calendar-picker-indicator {
    display: inline-block;
}

通过这种方式，您可以将输入显示属性设置为您喜欢的任何内容，并且一切都像以前一样工作。

原始回复

设置display: -webkit-inline-flex（这似乎是<input type="date" />的默认设置）将解决此问题，但这可能会改变布局，因为输入被视为内联元素。

这对我来说似乎是个错误，如果有人已经提交了错误报告，我会看看，否则我会。