Floating label inputs - autofill

[karolskolasinski]

Describe the bug When input fields are auto-filled, the label style with a white background does not fit the blue background of the input field.

To Reproduce Steps to reproduce the behavior: call autofill in input

Expected behavior Either remove the blue background or give the label a blue background (?). Something that will unify the look. I don't know is it a good idea.

Screenshots

Desktop (please complete the following information):

• OS: Linux Mint
• Browser: chrome
• Version: 131.0.6778.139

[JalenWasHere]

I don't know if this is even possible to fix with just CSS but you could try combining the autofill and peer selector.

• https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

• https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator

• https://tailwindcss.com/docs/hover-focus-and-other-states#autofill

• https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

Now that I think of it it would look just as weird to have the label be blue background as well. Only other option is disabling autofill styling completely but from a UX standpoint I would avoid that.

[karolskolasinski]

at least the rounded borders of the label seem reasonable