How to Remove Arrow on Input type Number with Tailwind CSS-CodePudding

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"

CodePudding user response：

<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"
/>

CodePudding user response：

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.

CodePudding user response：

I just try, the appearance property but it's not working, i'm gonna keep looking!