37

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"
Tyron
  • 1,141
  • 1
  • 4
  • 10

9 Answers9

78

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;
  }
}
Zack Plauché
  • 3,307
  • 4
  • 18
  • 34
Tyron
  • 1,141
  • 1
  • 4
  • 10
27

Adding to @Tyron answer which is correct.

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

Add compatibility to Mozilla

ref w3schools/howto/howto_css_hide_arrow_number

Aniket Das
  • 367
  • 1
  • 6
  • 17
RicardoVallejo
  • 793
  • 7
  • 11
17

Discovered a pure class way to do this that works both with Firefox and Chrome

<input
  type="number"
  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" 
  />

Thanks to these references:

Heechul Ryu
  • 381
  • 4
  • 6
5
/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')
module.exports = {
  plugins: [
    require("@tailwindcss/forms")({
      strategy: 'class', // only generate classes
    }),
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.arrow-hide':{
          '&::-webkit-inner-spin-button':{
            '-webkit-appearance': 'none',
            'margin': 0
          },
          '&::-webkit-outer-spin-button':{
            '-webkit-appearance': 'none',
            'margin': 0
          },
        }
      }
      )
    })
  ],
}

add this to your tailwind config.js and use as a normal tailwind class.

Konstantinos Gallis
  • 956
  • 6
  • 11
Otavio anovazzi
  • 51
  • 1
  • 2
1
[-moz-appearance:_textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none
MarredCheese
  • 17,541
  • 8
  • 92
  • 91
Arun Jenson
  • 11
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 14 '23 at 08:16
0

You can try using select component, inputs don't have arrows.

<select type="number" id="amount" name="amount">
    <option value="0">0</option>
</select>

Solution for all selects

@layer base {
    select {
        appearance: none !important;
    }
}

Solution for specific types

@layer base {
    select[type='number'] {
        appearance: none !important;
    }
}

With CDN

<style type="text/tailwindcss">
    @layer base {
        select[type='number'] {
            appearance: none !important;
        }
    }
</style>
Kuza Grave
  • 1,256
  • 14
  • 15
-1
<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"
/>
saad
  • 45
  • 7
-2

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.

C. van Ruitenbeek
  • 63
  • 6
  • `appearance-none` didn't work for me for `type="number"` but `[appearance:textfield]` worked instead - https://stackoverflow.com/a/71745933/1570165 (worked with Firefox but not with Chrome) – Heechul Ryu Mar 28 '23 at 22:41
-3

For Tailwind, you can search "appearance-none"

https://tailwindcss.com/docs/appearance

This removed the default addon behaviors of different input types.

Just a Dude
  • 1