Блог

Главная - Вопросы по программированию - Плохое поведение плавающих меток при автозаполнении

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

#css #bootstrap-4 #floating-labels

#css #bootstrap-4 #плавающие метки

Вопрос:

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

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

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

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

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

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

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

Ответ №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;
}

Комментарии:

1. Кстати. :placeholder-shown работает только при наличии заполнителя, поэтому иногда вам нужно указать placeholder=" " , даже если вы не хотите показывать заполнитель.

Ответ №2:

в итоге мне пришлось разделить вышеприведенную рекомендацию на 2 отдельных правила css, чтобы CHROME и FIREFOX разместились красиво

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

.form-label-group input:-webkit-autofill ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}