How to Remove Arrows from Number Input?

Last Updated : 16 Apr, 2024

The number input field is a common element in web forms, allowing users to input numeric values. However, By default, the appearance of arrows (spinners) next to the input can sometimes be unwanted for certain designs or user experiences. In this article, we’ll learn how to Hide/remove arrows using CSS and provide practical implementation steps.

Preview Image:

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

Default input box (Having arrows)

Input box without having arrows.

Different Approaches to Remove Arrows from Number Input

1. Using Webkit and moz appearance Property:

Using the ::-webkit-inner-spin-button and ::-webkit-outer-spin-button selectors, or ::-moz-number-spinners for Firefox, set the appearance property to none in CSS to hide the spin buttons in number inputs.

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>
        <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>

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

        <input
            type="number"
            placeholder="Enter number..."
        />
    </body>
</html>

Output:

Using Webkit and moz appearance Example Output

2. Using Inputmode Attribute:

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

HTML

<!DOCTYPE html>
<html>
    <body>
        <h3>Remove Arrows from Number Input</h3>

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