How to Remove Arrow on Input Type Number with Tailwind CSS ?

Last Updated : 24 Jul, 2023

When using the input element with the type=”number” attribute, most browsers will display an arrow control (also known as a spinner) at the right side of the input field. This control allows users to increment or decrement the value using the up and down arrows. However, in some cases, you may want to remove this arrow control for styling or UX purposes.

In this article, we’ll see How to Remove Arrow on an Input type Number with Tailwind CSS.

To remove the arrow on an input type number using Tailwind CSS, you can apply custom CSS classes to the input element. The classes will override the default browser styles for the number input.

The below approach will be used to remove the arrow on the number input using Tailwind CSS:

Approach: Using custom CSS

This approach targets the pseudo-elements ::-webkit-inner-spin-button and ::-webkit-outer-spin-button to hide the arrow control in WebKit-based browsers. It also sets the -moz-appearance property to textfield for Mozilla Firefox to remove its default styling.

Syntax:

// HTML
<input type="number" class="remove-arrow">

// CSS
.remove-arrow::-webkit-inner-spin-button,
.remove-arrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.remove-arrow {
    -moz-appearance: textfield;
}

Note: We can add these CSS styles on the global.css file.

Example: This is another example that describes the usage of the custom CSS to remove the Arrow on the Input type Number using Tailwind CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.7/dist/tailwind.min.css" 
          rel="stylesheet"> 
    <style> 
        .remove-arrow::-webkit-inner-spin-button, 
        .remove-arrow::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        } 
  
        .remove-arrow { 
            -moz-appearance: textfield; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="p-4"> 
        <label for="age"
               class="font-bold"> 
              Age: 
          </label> 
        <input type="number"
               id="age"
               name="age"
               class="remove-arrow border border-gray-300  
                      rounded px-4 py-2 mt-2 w-40"> 
    </div> 
</body> 
  
</html>