7

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

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Adrian Preuss
  • 3,228
  • 1
  • 23
  • 43

2 Answers2

9

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;
}
Adrian Preuss
  • 3,228
  • 1
  • 23
  • 43
  • Btw. `:placeholder-shown` only works if there is a placeholder, so sometimes you need to provide `placeholder=" "`, even if you don't want to show a placeholder. – RiZKiT Jul 04 '19 at 07:40
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;
}
Kevin
  • 29
  • 1