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

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.

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">&#x2715;</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/.