Input widget with reset "x" button of Internet Explorer

Hello,

I have an input widget that is displaying the reset cross in Internet Explorer. 

I don't want it there and I can't catch its class on IE inspector.

I've tried to use this: 

input[type=text]::-ms-clear {
  display: none;
}

but it didn't work.


I also tried to change the type to search and add this:

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

But it did not work either.

Does anyone has a clue of how to solve this?

Thanks in advance

Hi Filipa,

Which version? IE11?

Try this:

input[type=text]::-ms-clear {
display: none; 
width:0; 
height:0;
}
Solution

This seems to be working fine, I tested on IE 11 and Edge.

According to some post in net it Looks like does not work on older versions tough.

Maybe cache issue ?

check with a Higher version of IE and In a Different Machine

Solution

Hi Filipa,


With clear pseudo-element you generally have two problems. 

The first is the ie version, sadly this is only added after version 9. you can check it here.


The other problem is when you have compatibility mode activated.

Check your emulation setting on ie Dev tools to guarantee that you are not emulation for a older version too.


Nordin Ahdi wrote:

Hi Filipa,

Which version? IE11?

Try this:

input[type=text]::-ms-clear {
display: none; 
width:0; 
height:0;
}

Yes, it's IE11. but it did not work either.

 Thanks


Filipa Carrelo wrote:

Nordin Ahdi wrote:

Hi Filipa,

Which version? IE11?

Try this:

input[type=text]::-ms-clear {
display: none; 
width:0; 
height:0;
}

Yes, it's IE11. but it did not work either.

 Thanks


Try this url in your browser. I have replicated you code.

Works fine in my browser. If this fails in your browser then its just your browser issue. Try in a colleagues browser.


Here is a proof screenshot.

With your code and emulating version 11 in browser 11

 

With your code but  emulating version 8 in browser 11




coder kamath wrote:

Filipa Carrelo wrote:

Nordin Ahdi wrote:

Hi Filipa,

Which version? IE11?

Try this:

input[type=text]::-ms-clear {
display: none; 
width:0; 
height:0;
}

Yes, it's IE11. but it did not work either.

 Thanks


Try this url in your browser. I have replicated you code.

Works fine in my browser. If this fails in your browser then its just your browser issue. Try in a colleagues browser.


Here is a proof screenshot.

With your code and emulating version 11 in browser 11

 

With your code but  emulating version 8 in browser 11




Okay, I tried on another computer it worked. 

I cleared my cache and now the problem is solved.

Thanks a lot