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!

Solution 1

This will work in chrome:

input[type="search"] {
  -webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

Solution 2

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.

Comments

[Aaron Hudon]

You have had success where the type="number"?

[isapir]

Isn't it supposed to work out of the box without any prefixes?

[Dragan Okanovic]

Interesting, I had the need to not show the "x", and switching from type="search" to "input" is what worked.

[Dalex]

Also needed to not show the "x", but needed the field to remain type="search", and found that it can be hidden in this way: link