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

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

8984

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:

How to remove arrows from input field in HTML5



Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments