Detecting when browser’s autofill is open
There are pseudo-classes (
:-webkit-autofill etc.) for selecting inputs that have been autofilled, but is there a selector or some other solution for detecting when a browser’s autofill dropdown is open?
I was hoping I could change the placement of my own autocomplete dropdown list when a browser is offering autofill, because otherwise they overlap, ie. place my own autocomplete list above an input when the browser’s autofill is open, but otherwise have it show below the element.
I know I could disable autofill altogether, but I’d rather not. Is my only other option to just have my own autocomplete always appear above the element?
This question was suggested as a duplicate. That question asks “How do you tell if a browser has auto filled a text-box?” while my question is “How do you tell when a browser’s autofill dropdown is open?” None of the answers provide a solution to my question.
Since my intention seems a bit hard to explain, here’s a picture of what I mean:
What I’m trying to do is to detect whether the autofill dropdown, ie. the box with blurred text, is currently open or not. All the suggested answers deal with detecting when a user has actually selected (or is hovering over) something in the list.
In the situation shown in the image, where the dropdown is open but nothing has been selected, polling for pseudo selectors returns nothing.