Hide the IE10 Clear Field X Button with CSS

You will learn how Internet Explorer exposes some built-in input controls through vendor-specific CSS pseudo-elements. In particular, you will use ::-ms-clear to hide IE10's native clear-field X button while keeping your own clear-button interface.

Some browsers add controls inside form fields as part of their built-in user interface. Internet Explorer 10 adds a clear button—usually shown as an X—to eligible text inputs after the user enters a value.

IE exposes this particular control to CSS through the proprietary ::-ms-clear pseudo-element. A pseudo-element represents a browser-created part of an element rather than HTML you wrote yourself.

Because this is an IE-specific feature, the selector begins with the -ms- vendor prefix. Setting its display to none prevents that built-in clear control from being displayed:

input::-ms-clear {
  display: none;
}

This matters when an application supplies its own clear action. Keeping one clear mechanism avoids duplicate controls and lets the interface behave consistently with the rest of the application.

Think of a text input as a small room provided by the browser. You add the main furniture—the input element itself—but the browser may add built-in fixtures, such as an X button.

::-ms-clear is the nameplate for IE's built-in X fixture. CSS cannot select it with normal HTML selectors because it is not an element in your page's markup. The pseudo-element selector tells IE: “When you draw that internal clear fixture, do not show it.”

Use the ::-ms-clear pseudo-element with display: none.

/* Hide IE10/IE11's native clear button on all matching inputs. */
input::-ms-clear {
  display: none;
}

To limit the rule to a specific input, assign a class:

<label for="search">Search</label>
<input id="search" class="custom-clear-input" type="text">
<button type="button" id="clear-search">Clear</button>

.custom-clear-input::-ms-clear {
  display: none;
}

The class-scoped version is usually preferable because it changes only inputs that have a replacement clear control.

If you provide your own clear button, it can clear the input with JavaScript:

const input = document.querySelector('#search');
const clearButton = document.querySelector('#clear-search');

clearButton.addEventListener('click', () => {
  input.value = '';
  input.focus();
});

input.value = '' replaces the current text with an empty string, and input.focus() returns the keyboard cursor to the field.

Consider this example:

<input id="email" class="has-custom-clear" type="text" value="sam@example.com">
<button id="clear-email" type="button">Clear</button>

.has-custom-clear::-ms-clear {
  display: none;
}

const email = document.querySelector('#email');
const clearEmail = document.querySelector('#clear-email');

clearEmail.addEventListener('click', () => {
  email.value = '';
  email.focus();
});

Execution flow:

1. IE renders the text input and would normally make its internal X button available when text exists.
2. The CSS selector matches IE's internal ::-ms-clear control for .has-custom-clear.
3. display: none hides that internal control.
4. The user clicks the page's visible Clear button.
5. The click handler sets email.value to ''.
6. The field becomes empty and receives focus again, so the user can immediately type a replacement value.

• Search bars: A site may use a custom clear icon that matches its design system.
• Filter panels: A clear button may reset both the text field and related filters, so a native input-only clear action would be incomplete.
• Form fields with validation: A custom action can clear the value, validation message, and application state together.
• Legacy intranet applications: Organizations supporting IE10 or IE11 may need consistent controls across managed devices.
• Accessible component libraries: A reusable input component may provide one documented clear-button behavior instead of mixing a custom control with browser-specific controls.

In real projects, scope browser-specific CSS as narrowly as possible. Avoid hiding the clear control from every input unless every input has an equivalent replacement.

A common component pattern is to apply a class only when the application renders a custom clear button:

.text-field--with-clear::-ms-clear {
  display: none;
}

When the custom button clears a controlled value, update every related state value. For example, a search component may clear the query and refresh results:

function clearSearch() {
  searchInput.value = '';
  renderResults(allProducts);
  searchInput.focus();
}

Also make the custom button a real <button type="button">. A real button is keyboard accessible by default and, unlike a button without an explicit type inside a form, type="button" does not submit the form.

Keep the IE-specific rule in a legacy stylesheet or alongside the component it supports. Modern browsers generally ignore an unsupported vendor pseudo-element selector, so no JavaScript browser detection is needed for this CSS rule.

Using the wrong pseudo-element

::-ms-reveal is associated with the password reveal control, not the text-field clear X.

/* Wrong for the clear X button */
input::-ms-reveal {
  display: none;
}

Use ::-ms-clear instead:

input::-ms-clear {
  display: none;
}

Expecting the rule to work in every browser

::-ms-clear is Microsoft-specific. It does not remove clear controls implemented differently by other browsers. Test the browser and input type you support.

Hiding a useful control without a replacement

If you hide the native X, users should still have a straightforward way to clear the field when that action is important. Provide a visible custom button or ensure deleting text manually is acceptable.

Making a clear button submit a form

Inside a form, this button submits by default:

<!-- Broken: clicking this may submit the form -->
<button>Clear</button>

Prevent accidental submission:

<button type="button">Clear</button>

Applying the rule too broadly

This affects every matching input:

input::-ms-clear {
  display: none;
}

Prefer a component class when only selected fields have a custom clear mechanism:

.custom-clear-input::-ms-clear {
  display: none;
}

The key distinction is that ::-ms-clear targets one specific, browser-created subcontrol. It is more precise than trying to remove all native input styling.

/* Hide IE10/IE11's internal clear X on selected inputs */
.custom-clear-input::-ms-clear {
  display: none;
}

<input class="custom-clear-input" id="query" type="text">
<button type="button" id="clear-query">Clear</button>

document.querySelector('#clear-query').addEventListener('click', () => {
  const query = document.querySelector('#query');
  query.value = '';
  query.focus();
});

• ::-ms-clear is an IE/Microsoft vendor pseudo-element.
• Use display: none to hide the native X.
• Scope the selector with a class when possible.
• Use ::-ms-reveal only for the password reveal control.
• Give custom clear buttons type="button" inside forms.
• Unsupported browsers ignore this IE-specific selector; it does not control their own UI.

Can I remove the IE10 clear X button with CSS?

Yes. Use the IE-specific ::-ms-clear pseudo-element and set display: none.

input::-ms-clear { display: none; }

Does ::-ms-clear work in modern Chrome, Firefox, or Safari?

No. It is a Microsoft-specific pseudo-element intended for Internet Explorer and related legacy Microsoft rendering behavior. Other browsers may have different controls and selectors.

Should I hide the native clear button on every input?

Usually no. Hide it only on inputs where your application provides an equally usable replacement, preferably by targeting a class.

What is the difference between ::-ms-clear and ::-ms-reveal?

::-ms-clear targets the clear X in applicable text fields. ::-ms-reveal targets the password reveal control in password inputs.

Why does my Clear button submit the form?

A <button> inside a form defaults to submit behavior in HTML. Add type="button" for a non-submitting clear action.

Do I need JavaScript to hide IE's X button?

No. CSS is enough to hide it. JavaScript is only needed if you are implementing your own button that clears the value.

Is it accessible to replace the native clear button with a custom one?

It can be, if you use a real button, give it a clear accessible label such as aria-label="Clear search" when its visible label is only an icon, and keep it keyboard operable.

• CSS pseudo-elements — Select browser-created or generated parts of an element.
• Vendor-prefixed CSS — Browser-specific extensions such as -ms- for legacy Microsoft behavior.
• HTML form controls — Understand input types, buttons, labels, and default form behavior.
• DOM events — Use click handlers to implement a custom clear action.
• Input value handling — Read and set text with the JavaScript value property.
• Accessibility for buttons — Ensure replacement controls work with keyboards and assistive technology.
• Progressive enhancement — Add browser-specific refinements without breaking other browsers.