Bootstrap 5 form-floating label overlap during browser autofill

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.

• Does Bootstrap 5 provide a native configuration to hide placeholders during browser autofill?
• What is the recommended approach to ensure label visibility without introducing browser-specific CSS overrides?