Open In App

How to disable arrows from Number input ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will see how to disable arrows from the Number input. Basically, we have two common methods to disable the arrow from the number input

  • Using -webkit- appearance and -moz- appearance method
  • Using inputmode method

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: In this approach, we are using -webkit- appearance: none and -moz- appearance:textfield it will make input without an arrow.

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: In this example, we using the above-explained approach.

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 modern browsers like Chrome, Firefox, Edge, and 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: In this example, we are using the above approach.

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 :



Last Updated : 04 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads