Why has the behavior of `input type="date"` changed?

UpdateChromium team accepted the bug and submitted a patch back to WebKit.The gist of the change is that the date controls will be rendered inside a flexible box element regardless of the style applied to the input[type='date'] control.

I'm the one that reported the defect referenced here to Chromium. One proposed solution is to apply display: inline-block; to the calendar picker:

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

However, that is a wonky solution because the controls are still shifted to a location other than right-justified on the input[type="date"] control.

Another option is to 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:inline-block;    float:right;}

This has the side-effect of inverting the spinner and calendar picker controls.

The best hack, I think is to remove the spinner and 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;}

updated

Found Problem

Bootstrap uses 2 style attributes..

1 - display:inline-block which makes google break the arrow onto another line

2 - height: 20px which prevents you from seeing this "line"

Update

The Google Chrome Issue was marked as a regression, so this will hopefully be fixed soon.As a temporary workaround, the following will work:

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

This way you can keep the inputs display property set to whatever you like and everything works as it did before.

Original Response

Setting display: -webkit-inline-flex (which seems to be the default for <input type="date" />) will fix this issue, this might however alter the layout, as the input is treated like an inline element.

This seems like a bug to me, I'll look if someone already filed a bug report, otherwise I will.