There are various solutions available for removing the "X" from an input field in IE 10+ browsers. I have tried multiple approaches without success.
For example, I have referenced:
ans 1
ans 2
ans 3
Despite implementing all of these solutions, I still cannot remove the X icon from my input field. Here is a simple input control that I created:
<input type="text" id="RemoveX" />Below is the CSS I am using to try and hide the X:
input[type=text]::-ms-clear { display: none; width: 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width: 0; height: 0; }
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; }
#RemoveX::-ms-clear { display: none; width: 0; height: 0; }
#RemoveX::-ms-reveal { display: none; width: 0; height: 0; }
#RemoveX::-webkit-search-decoration,
#RemoveX::-webkit-search-cancel-button,
#RemoveX::-webkit-search-results-button,
#RemoveX::-webkit-search-results-decoration { display: none; }I am specifically working with IE 11 and have verified compatibility mode settings. I am solely focused on addressing this issue in IE 10+ browsers and not testing in other browsers at this time. Any assistance on resolving this matter would be greatly appreciated.