How to remove arrows / spinners from input type number in HTML5

0 10544

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>

Execute

Output:

How to remove arrows from input field in HTML5