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

By Ann Roberts On Jul 24, 2023

Improve Article

Save Article

Like Article

Improve Article

Save Article

Like Article

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=

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>

Output:

Last Updated :
24 Jul, 2023

Like Article

Save Article

Improve Article

Save Article

Like Article

Improve Article

Save Article

Like Article

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

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=

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>

Output:

ezgifcom-crop-(17).gif

Last Updated :
24 Jul, 2023

Like Article

Save Article

Read original article here

Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.