cssreactjsinputnumberstailwind-css

How to Remove Arrow on Input type Number with Tailwind CSS


I have an input of type number, and I want to remove the increment/decrement arrows that come with it by default. How can I do that with Tailwind CSS? I looked up for it but found nothing that solves this problem.

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

Solution

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

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