0

In Chrome, I have created form input elements that has a label, when focused, float above the input field. This works and executes perfectly.

When I use the chrome autofill for the username and password, the browser populates the input field with the yellow prefilled text. The issue I am having is the label JS does not execute and float to the upper right when the yellow prefilled text is visible. It does auto-correct the issue if you click anywhere on the page. Any thoughts or solutions? I do need the autocomplete feature to be set. enter image description here

bldev
  • 137
  • 1
  • 1
  • 12

1 Answers1

1

When Chrome autofills an input, it won't trigger the :focus state that your CSS currently relies on. Unfortunately, no such pseudo-selector exists in CSS for detecting whether an input is filled or not (learn more here).

Your best option is using jQuery to detect whether each of your inputs has a value and add a class if true. See the example here. Then revise your animation effect so that it applies to input.has-data-class, for example.

Community
  • 1
  • 1
brogrammer
  • 804
  • 1
  • 12
  • 22