Last Updated: February 25, 2016
·
1.739K
· stowball

Leave/reset WebKit's default CSS display property for date & time inputs

Many developers and front-end frameworks globally change form inputs' display to inline-block or similar.

Unfortunately, this interferes with their rendering in Chrome. So, if you do change form inputs, make sure you also reset date & time inputs with the following:

input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    display: -webkit-inline-flex;
}

This won't harm non-WebKit browsers as they'll ignore the prefixed display value.