Display IE ::ms-clear pseudo element in small input elements? - html

Question

I have several input elements for dates and texts.
If their width is bigger than 94px the "X" ::-ms-clear is displayed but some of my inputs are smaller.
Is there a way to tell IE to display the "X" even if the input elements are only 50-60px wide? The solution should work for IE9 and higher.

Answer 1

Your best option here is to disable the custom clear button, and provide your own. You can disable the clear button in Internet Explorer and Microsoft Edge like this:
::-ms-clear { display: none }
This will not, however, disable the custom clear button in other browsers, such as Google Chrome. In Chrome, you'll need to target a different pseudo-element:
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
The above pattern is understood by both Chrome and Microsoft Edge. For Internet Explorer, you will need to continue using the earlier ::-ms-clear element as well.
With these elements hidden, we can now provide our own:
<form>
<input type="search">
<button class="clear">✕</button>
</form>
We can then use Event Delegation to intercept click events on .clear at the parent <form>:
var form = document.querySelector( "form" );
form.addEventListener( "click", function ( event ) {
event.preventDefault();
if ( event.target.className === "clear" ) {
event.target.previousElementSibling.value = "";
}
});
You can see the end-result online at https://jsfiddle.net/jonathansampson/ety8bx93/.