If you’re using Chrome (or another WebKit browser), you’ll see up and down arrows next to the <input type="number" /> above (if not, try hovering over it).
To get rid of these set the CSS to the following:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Tada!
#nospin::-webkit-inner-spin-button,
#nospin::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Perhaps if they were not so ridiculously small we would actually like to use them and not want to get rid of them.
LikeLike
I think they certainly have their uses and I’m generally against removing default functionality but sometimes styling (or a client) dictates they’re removed! The reason I removed them for this blog post was due to having some very narrow numeric inputs, where the spin buttons were taking up valuable screen real estate.
LikeLike