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:

回答1:

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;
}

回答2:

i ended up having to split the recommendation above into 2 separate css rules in order to get CHROME and FIREFOX to place nice

.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;
}

来源：https://stackoverflow.com/questions/55552494/bad-behavior-of-floating-labels-when-autocomplete

标签

css

bootstrap-4

floating-labels