New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Floating labels incorrectly positioned for inputs with autofill, but no value #39899
Comments
Hello @LukaszPiatkowski27. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details. |
Hi @louismaximepiton, |
Prerequisites
Describe the issue
Floating labels get stuck in their transformed position for inputs that were initially auto-filled by the browser, but cleared programmatically using javascript.
ex.
example html:
Even though the input in its current state doesn't have any
value
attribute (the same applies ifvalue=""
),it still holds its
:autofill
pseudo-class, therefore incorrect css rules are being applied to its label.important note:
I observed this issue in the Firefox browser. This may be irrelevant for other browsers.
Reduced test cases
here is an example html body
Potential solution:
Exclude inputs with no
value
attribute or it being empty from the:autofill
,:-webkit-autofill
etc. selectors.Edit: The solution might not work since apparently autofill in Firefox doesn't add nor update the value attribute 😮
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.3.3
The text was updated successfully, but these errors were encountered: