Skip to content
Related Articles

Related Articles

How to disable arrows from Number input ?
  • Last Updated : 16 Feb, 2021

In this article, we will see how to disable arrows from the Number input.

See the Images below, the first image is having the default arrow and the second is without having the arrow.

Default input box (Having arrows)

Input box without having arrows.

To achieve this, we use the following syntax :

Approach 1:



For chrome, Safari, Edge, Opera :

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

For firefox :

input[type=number]{
    -moz-appearance: textfield;
}

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
  
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
      GeeksforGeeks
    </h1>
  
    <h3>
        How to disable arrows from
        Number input using CSS?
    </h3>
  
    <input type="number" 
           placeholder="Enter number..." />
</body>
  
</html>

Output :

Approach 2: This approach is simple yet powerful. Using inputmode=”numeric” attribute you can find an input box without an arrow. The older browsers might not support this feature for example Internet Explorer and Safari but most of the modern browsers like Chrome, Firefox, Edge, Opera support this attribute. The main purpose of this attribute is to provide a numeric input interface in mobile devices.

<input type="text" inputmode="numeric" />

Example :

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
  
    <h3>
        Disable arrows from number input
    </h3>
  
  <input type="text" inputmode="numeric"
         placeholder="Enter number..."/>
</body>
  
</html>

Output :

My Personal Notes arrow_drop_up
Recommended Articles
Page :