CODEWITHSUNDEEP
htmlcssinternet-explorerpseudo-element
Peter Mueller
Peter Mueller

Reputation: 13

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.

Upvotes: 1

Views: 3683

Answers (1)

Sampson
Sampson

Reputation: 268344

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/.

Upvotes: 1

Related Questions