HTML5 have many cool things and input type number is one of them. HTML5 allows us to input only numbers from the box and there is a way to specify limits for input values.

When we are using input type number we can used some HTML attribute like min="", max="", value="".

But you notice that up/down arrows on the right side, embedded into the input field. in html5 up-down arrows to number input field called spinners. basically up-down arrows used to increment and decrement of type="number" input filed.

By default input="number" look like,

Program:

<!DOCTYPE html> <html> <head> <title> Default input Field </title> </head> <body> <h2> Default input Field </h2> <div> <p>Default:</p> <input type="number" value="10"> </div> </body> </html>

Output:

You can remove arrows/spinners from input type using CSS

Program:

<!DOCTYPE html> <html> <head> <title> Hidden arrows input Field </title> <style> /* Specilly used for Firefox */ input[type=number] { -moz-appearance: textfield; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } </style> </head> <body> <h2> Hidden arrows input Field </h2> <div> <p>Hidden arrows:</p> <input type="number" value="10"> </div> </body> </html>

Output: