How to show X (Clear) in Chrome INPUT with type NUMBER?

Question

I created an application that uses an input, of type number:

<input type="number" min="-1000000" max="1000000" step="0.01">

In IE, this has a little "clear" or [X] on the right side. My users find this very valuable because they enter large numbers in these fields, and often like to clear them out with a click.

It turns out that some of the users prefer Chrome as their browser. In Chrome, however, this text box shows a "spinner", which is an up/down arrow. This is of no use here because they aren't going to increment these large numbers by 1 cent to reach a target.

I was able to search and find info on how to hide the "spinner" in chrome, and I also saw that a search input box might give me the [X] I was looking for, but at the cost of losing the built in support for number type.

I wasn't able to find any way to specify an [X]/Clear in Chrome number INPUT fields.

The only option I can think of is hiding the spinner using CSS (I think this can be done), and adding my own button to the right instead, using JS to clear out the textbox. Before I do this, wondering if there was a trick I missed.

The other option, which seems less appealing, would be to convert my text boxes to type search, and then add all of the manual number checking JS logic by hand.

Thanks!

Answer 1

Seems like this is not possible with pure CSS, since when you inspect shadow dom for that element there's no such element available. However you can always use JS.