Плохое поведение плавающих меток при автозаполнении

Question

Я использую Пример плавающих меток из Bootstrap 4.3 .

Если в браузере уже есть учетные данные для автозаполнения, макет <input> будет прерываться.

Анимация (и свойства размера и поля) плавающих надписей начнутся только в том случае, если окно / документ имеет фокус.

Как я могу предотвратить эти проблемы?

Я нашел свойство CSS :-webkit-autofill или попытайтесь сфокусировать первое поле input, но проблема не будет решена.

Предварительный просмотр:

Answer 1

Я нашел ответ.

По умолчанию метка будет стилизована, только если placeholder не виден:

.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}

Хитрость в том, чтобы установитьтот же properties, если autofill представлен с :-webkit-autofill:

.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group input:-webkit-autofill ~ label /* <<<< Add these */
{
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}