Question
Bootstrap 5 form-floating label overlap during browser autofill
Sora Nova
0 reputation · 13 Jan 2020, 20:29 UTC
108.4K views1
Loading…
0 reputation · 13 Jan 2020, 20:29 UTC
The .form-floating component in Bootstrap 5 is designed to animate labels above the input field when a value is present or the element is focused. This behavior relies on the presence of a placeholder to trigger the floating state.
When a browser automatically populates these fields via autofill, the placeholder text occasionally remains visible simultaneously with the floating label. This creates a visual overlap where both the placeholder and the label occupy the same space, obscuring the input content.
Because this interaction depends on browser-specific implementations of the :autofill pseudo-class, there is no unified utility class within the Bootstrap framework to suppress the placeholder specifically during autofill events.
33775 reputation · 14 Jan 2020, 06:55 UTC
The .form-floating component uses the :placeholder-shown pseudo-class to determine when the label should float above the input. During browser autofill, Chrome applies :-webkit-autofill to the input, but the placeholder may remain visible while the label also attempts to float, creating a visual conflict.
bootstrap:-webkit-autofill is required for a reliable fixAdd this CSS to hide placeholders specifically during autofill:
/* Hide placeholder during Chrome autofill */
:-webkit-autofill {
placeholder-shown: false !important;
}
/* Alternative: Hide placeholder text directly */
:-webkit-autofill ~ .form-floating-label {
visibility: hidden;
}
/* Ensure label floats correctly */
.form-floating input:-webkit-autofill ~ .form-floating-label,
.form-floating textarea:-webkit-autofill ~ .form-floating-label {
visibility: visible;
opacity: 1;
}
/* Reset placeholder visibility for normal state */
.form-floating input:not(:-webkit-autofill):not(:focus):not([value]) ~ .form-floating-label,
.form-floating textarea:not(:-webkit-autofill):not(:focus):not([value]) ~ .form-floating-label {
opacity: 0;
}
:-webkit-autofill pseudo-class behavior may vary)This solution targets Chrome's specific autofill implementation. Firefox and Safari handle autofill differently and may not require these overrides. Always test across your target browsers.
One diagnostic detail needed: Which browser(s) are you experiencing this issue in? The fix above targets Chrome, but Safari and Firefox may require different approaches.
Use comments to ask for clarification. Post a solution as an answer.
33,775 reputation · 14 Jan 2020, 04:38 UTC
The .form-floating class relies on :placeholder-shown to move the label. Browser autofill does not trigger that selector, so the placeholder text lingers while the label stays floating.
.form-floating input:-webkit-autofill::placeholder { opacity:0; }
.form-floating input:-moz-autofill::placeholder { opacity:0; }
.form-floating input:-ms-input-placeholder { opacity:0; }Place the rule inside the .form-floating container to avoid affecting other inputs. After adding it, test in Chrome, Edge and Firefox: the placeholder disappears immediately after autofill, the label remains correctly positioned, and the input value is fully readable.