How to Remove Arrows from Number Input?

Last Updated : 09 Sep, 2024

The arrows in a number input box, known as spinners, allow users to increment or decrease the value using up and down arrows. Removing arrows from a number input in HTML disables the spinner buttons that allow users to increase or decrease the value. This can be achieved using CSS by hiding the spin buttons with specific browser-specific selectors.

Preview Image:

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

how to Hide arrows from number input — Default input box (Having arrows)

how to remove arrows from number input — Input box without having arrows.

Here are some common approaches to hide arrow from Number Input :

Table of Content

Using Webkit and moz appearance Property
Using Inputmode Attribute

1. Using Webkit and moz appearance Property:

To remove arrows from a number input using the -webkit-appearance and -moz-appearance properties, set them to none. This hides the default browser styling for number inputs in WebKit (Chrome, Safari) and Mozilla (Firefox) browsers.

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 are removing arrows from number input fields in web browsers by targeting the outer and inner spin buttons

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Disable arrows from Number input using CSS
    </title>
    <style>
        /* Hide the spin buttons in WebKit browsers */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Hide spin buttons in Firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body>

    <h3>
        How to disable arrows from Number input using CSS?
    </h3>

    <!-- Number input without arrows -->
    <input type="number" 
           placeholder="Enter number..." />
</body>

</html>

Output:

RemovingArrow — Using Webkit and moz appearance Example Output

2. Using Inputmode Attribute

The inputmode attribute specifies the type of input expected, helping control the virtual keyboard layout on mobile devices. For numeric input without spinners, set inputmode="numeric", which brings up a numeric keyboard without adding spinners.

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 removing arrows from a number input using the inputmode attribute set to numeric, enhancing user experience and design flexibility.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Remove Arrows from Number Input
    </title>
</head>

<body>
    <h3>Remove Arrows from Number Input</h3>

    <input type="text" 
           inputmode="numeric" 
           placeholder="Enter number..." />
</body>

</html>