Learn how to remove the clear or 'X' button from input fields in Internet Explorer using CSS to enhance user experience. Follow this step-by-step guide for a seamless web development process.
Internet Explorer used to drop a little clear button (the “X”) at the right edge of text inputs. Handy sometimes, annoying when it collides with your own icons or wipes a value the user meant to keep. If you need it gone, CSS does it in a few lines.
The fix
IE 10 and 11 render that button through the ::-ms-clear pseudo-element. Target it and set it to display: none:
input[type="text"]::-ms-clear {
display: none;
width: 0;
height: 0;
}The width and height reset are belt-and-suspenders so it never reserves layout space.
Want it gone only on certain fields? Scope it with a class instead of hitting every text input:
input[type="text"].no-clear::-ms-clear {
display: none;
width: 0;
height: 0;
}Add .no-clear to the inputs you want to strip, and leave the rest alone.
One honest note
This is a legacy fix. Internet Explorer reached end of life on June 15, 2022, and ::-ms-clear is an IE-only pseudo-element (per MDN). The modern Chromium-based Edge doesn’t render it, and neither do Chrome, Firefox, or Safari, so you only need this if you’re still supporting old IE. If you’re not, you can skip it entirely. The rule is harmless in modern browsers either way.