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).

Could you share yous HTML and CSS snippets? – Alexander Jul 24 '17 at 15:24 — Alexander, Jul 24 '17 at 15:24
please provide fiddle or html code – Ismail Farooq Jul 26 '17 at 07:56 — Ismail Farooq, Jul 26 '17 at 07:56

score 8 · Answer 1 · answered Jul 25 '17 at 10:27

You have to add autocomplete="off" in your input field

<input type="text" placeholder="Type here" autocomplete="off">

And

If it is a dynamic element or you can't add this in your input then you can do this with a simple script

$('input').attr('autocomplete','off');

This can be useful for you

score 6 · Accepted Answer · answered Jul 24 '17 at 18:45

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.

There were no answers that fully satisfy me. But I want to reward this one, because it tries to understand the problem and suggests variant of solving my problem without giving up dropdown. — g1un, Jul 26 '17 at 10:17
@g1un - I appreciate it, though it's a shame we couldn't find a better solution. I think I will log the issue with Microsoft anyway, just to get their take on it. If they do fix it it will be one less browser quirk to worry about — PTD, Jul 26 '17 at 10:26
@DanielRuf - I never got round to logging it, but the issue I demonstrated in my codepen seems to be working as expected in Edge now. — PTD, Jan 10 '18 at 14:52
Well so far we could not solve it with CSS and there seems to be no solution so far. — , Jan 13 '18 at 18:32
Interestingly, while it was working on my work laptop it doesn't appear to be behaving on my desktop at home... — PTD, Jan 14 '18 at 17:02
Apparently once I save login in Google Chrome and it starts using autofill - the behaviour is exactly the same as in Edge — Boppity Bop, Jan 05 '21 at 18:07

score 5 · Answer 3 · answered Jul 19 '17 at 22:14

5

Better turn off the autocomplete

<input type="text" placeholder="Type here" autocomplete="off">

answered Jul 19 '17 at 22:14

Shaheed Mon

471
4
8

Indeed, this doesn't resolve it in Microsoft Edge 42.17134.1.0 – Marc J. Schmidt Jan 21 '19 at 09:26

score 0 · Answer 4 · answered Jul 26 '17 at 09:46

0

I haven't tested it, I have no access to IE right now, but in other browsers some default behaviours can be updated using some CSS. Hope it can help you:

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

answered Jul 26 '17 at 09:46

Diego N.

562
3
10

score 0 · Answer 5 · answered Jun 25 '21 at 18:29

0

Just add outline: none; in ur css and it should do the trick!

CSS:

input { 
   outline: none;
}

HTML:

<input style="outline: none;" type="text" id="lname" name="lname">

answered Jun 25 '21 at 18:29

Dreamer64

923
2
13
30

How to remove border and background of input in ms edge

5 Answers5