'How to Remove Arrow on Input type Number with Tailwind CSS

i have an input type number, and i want to remove the arrow by default, how can i do that with tailwindCSS, i look for it and found nothing to solve the problem.

 input type="number" placeholder="Numéro de téléphone" className="border p-4 outline-none"
cssreactjsinputnumberstailwind-css


Solution 1:[1]

So i found the solution for this -> On your global.css you have to add

@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

Solution 2:[2]

<input type="number" placeholder="Numéro de téléphone" className="border p-4
outline-none appearance-none" />

this with tailwind here a link you can look on it tailwind

and with normal css :

<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>
<input
  type="number"
  placeholder="Numéro de téléphone"
  className="border p-4
  outline-none"
/>

Solution 3:[3]

To remove the arrows you need to set appearance to none (source[https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp])

If you use TailwindCSS 3 you could try this: https://tailwindcss.com/docs/appearance, if you use TailwindCSS 2, this: https://v2.tailwindcss.com/docs/appearance.

I hope this solves your issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 saad
Solution 3 C. van Ruitenbeek

Related Questions