How to remove border and background of input in ms edge

Question

It appears when dropdown with suggestion texts opens the input is hovered.
Setting focus, active, hover styles doesn't help. It looks like it's out of DOM.
How can I remove the border and the background of an input text in Edge?

UPDATE

If there is no css solution, can anybody answer me with a link to how-it-works-article and/or provide me a javascript workaround (I want it to be like in google.com search input).

Answer 1

From the answers given to this similar question on SO, and as you suspected yourself, the autocomplete list that appears beneath the textbox is out of the DOM and so cannot be targeted by CSS.

From my experimenting on codepen it appears that Edge is overlaying a semi-transparent element over the textbox (matched in both height and width), rather than the styling being applied to the textbox itself.

My first demo on codepen shows what happens with the styling when autocomplete is turned off. You will see that by chaining the :hover and :focus pseudo-classes I can create a different style when hovering over a textbox that is already in focus (blue when in focus, red when hovering over the same textbox when it is in focus).

This is worth noting when looking at my second demo on codepen (in Edge, obviously) which has autocomplete turned on. When you click into the textbox the background colour is red (as is expected - I am hovering over a textbox that is in focus). However, move your mouse slightly and the background changes to blue, indicating that the textbox is active but is no longer being hovered over. This isn't correct - we're still hovering over it.

This could be a quirk with Edge, or a bug with how the browser handles autocomplete. It could be worth raising with Microsoft - there doesn't appear to be anything listed regarding this on their issue tracker.

One of the answers given in the first link I provided suggests using jQueryUI's implementation of autocomplete. It's a bit of a faff when the browser should do it by default, but you will be able to target the styling of the autocomplete list and, in theory, avoid the issue you are having.