Почему изменилось поведение `input type=date`?

Обновление Команда Chromium приняла ошибку и отправила исправление обратно в WebKit< /а>. Суть изменения заключается в том, что элементы управления датой будут отображаться внутри элемента гибкого поля независимо от стиля, примененного к элементу управления input[type='date'].

Я который сообщил об упомянутом здесь дефекте в Chromium. Одним из предлагаемых решений является применение display: inline-block; в окно выбора календаря:

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

Однако это шаткое решение, потому что элементы управления по-прежнему смещаются в другое место, кроме выравнивания по правому краю в элементе управления input[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;
}

обновлено

Найдена проблема

Bootstrap использует 2 атрибута стиля.

1 – display:inline-block, из-за чего Google переносит стрелку на другую строку.

2 – высота: 20 пикселей, из-за чего вы не видите эту "линию"

Обновить

Проблема с Google Chrome была отмечена как регресс, поэтому мы надеемся, что она будет исправлена ​​в ближайшее время. В качестве временного обходного пути будет работать следующее:

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

Таким образом, вы можете установить для свойства отображения входов все, что вам нравится, и все будет работать, как и раньше.

Исходный ответ

Установка display: -webkit-inline-flex (которая, по-видимому, используется по умолчанию для <input type="date" />) решит эту проблему, однако это может изменить макет, поскольку ввод обрабатывается как встроенный элемент.

Мне это кажется ошибкой, я посмотрю, если кто-то уже подал отчет об ошибке, в противном случае я буду.