为什么`input type =“date”的行为发生了变化？-Java 学习之路

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

3 回答

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

我就是那个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;
}
```
回复于 2024-04-27T22:26:04+08:00
14

updated

Found Problem

Bootstrap使用2个样式属性..

1 - display:inline-block 这使谷歌将箭头分成另一条线

2 - height: 20px 阻止你看到这个"line"

回复于 2024-04-27T22:26:04+08:00
2
Update

谷歌浏览器问题被标记为回归，因此希望很快就能修复 . 作为临时解决方法，以下内容将起作用：
```
input[type=date]::-webkit-calendar-picker-indicator {
    display: inline-block;
}
```
这样，您可以将输入显示属性设置为您喜欢的任何内容，并且一切都像以前一样工作 .

Original Response

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

这对我来说似乎是一个错误，我会看看有人已经提交了错误报告，否则我会 .
回复于 2024-04-27T22:26:04+08:00

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

3 回答

相关问题