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

Question

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

Answer 1

更新 Chromium团队接受了该错误并将补丁提交回WebKit.无论应用于输入[type ='date']控件的样式如何,更改的要点是日期控件将在灵活的box元素内呈现.

我是那里报告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 - 显示:内联块,使谷歌将箭头分成另一条线

2 - 身高:20px,可以防止你看到这条"线"