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;
}
Thanks go to Bob Spryn on StackOverflow.
Advertisements
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