Search code examples
cssbootstrap-4floating-labels

Bad behavior of floating-labels when autocomplete

I've using the Floating labels example from Bootstrap 4.3.

If the browser has already credentials on the autocompletement, the layout of <input> will breaks.

The animation (and the size & margin properties) of floating labels will only start, if the window/document has an focus.

How i can prevent these problem?

I've found the CSS propertie :-webkit-autofill, or try to focus the first input field, but the problem will be not solved.

Preview:

Preview

Solution

  • I've found the answer.

    By default, the label will be styled only if the placeholder is not visible:

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

    The trick is, to set the same properties if the autofill is presented with :-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;
}