For a long time we've lived with a few basic input types; text, password, select, and submit. But with HTML5 there are a few more input types that we get to play with. Some of these are yet to be fully supported, but if you're developing for a single browser like I am at the moment, and that single browser happens to be Chrome, you're in luck.
After finding Angular's ng-pattern
to be cumbersome, I decided to checkout the number input type. The client-side validation was just what I wanted, but the pesky up/down buttons made it look ugly and took up precious space on my already cramped user interface.
Having used the power of Google, I found a way to disable these ugly buttons.
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
The next issue I had was that it wanted to accept integers only. Not good for currency operations.
Luckily, there are a few attributes available to us. One of these is step
, which "specifies the value granularity of the element’s value". Setting step
to any
allows you to go to any granularity you like.
Another two useful attributes are min
and max
, which allow you to set a defined range.
<input type="number" step="any" min="0" max="100">
This is a truly useful element and hopefully we'll see much more built-in functionality come to HTML5.
Top comments (0)