CODEWITHSUNDEEP
htmlcssmicrosoft-edge
g1un
g1un

Reputation: 374

How to remove border and background of input in ms edge

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. enter image description here
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).

Upvotes: 13

Views: 4727

Answers (5)

Dreamer64
Dreamer64

Reputation: 1189

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

CSS:

input { 
   outline: none;
}

or

HTML:

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

Upvotes: 1

Diego N.
Diego N.

Reputation: 632

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;

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

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

Upvotes: 8

PTD
PTD

Reputation: 1043

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.

Upvotes: 6

Shaheed Mon
Shaheed Mon

Reputation: 491

Better turn off the autocomplete

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

Upvotes: 5

Related Questions