Open In App

How to Remove Arrows from Number Input?

Last Updated : 16 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

how to Hide arrows from number input

Default input box (Having arrows)

how to remove arrows from number input

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:

RemovingArrow

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>

Output:

RemovingArrow2

Using Inputmode Attribute Example Output


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads