Remove arrows from number input in TailwindCSS
<input
type="number"
class="[&::-webkit-inner-spin-button]:appearance-none [appearance:textfield]"
/>
The default appearance of the HTML5 number input field is not exactly suitable for all designs. The up and down arrows - or spin boxes as they are officially known - are not exactly aesthetically pleasing. Removing the arrows is not the easiest thing to do, but fortunately it is not impossible. The problem is that there is no agreed standard and so a different solution is needed for webkit browsers and Firefox.
In webkit you need to style the ::-webkit-inner-spin-button
and the ::-webkit-outer-spin-button
pseudo classes on number input and set the appearance
to none
and margin
to 0
. With TailwindCSS you can do this with the following code:
<input
type="number"
class="[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0"
/>
In Firefox you need to set the appearance
property to textfield
to work properly.
<input
type="number"
class="[appearance:textfield]"
/>
The final version is:
<input
type="number"
class="[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [appearance:textfield]"
/>
Remove arrows globally using global.css
In most cases, a better solution is to remove the spin buttons already in the CSS reset process, so that it will be valid everywhere and you don't have to pay attention to it for each number input. This is done by modifying the global.css
file, or the file where the @tailwind
rules are inserted.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
input[type="number"] {
appearance: textfield;
}
}
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS