appearance-none utility does not hide input number arrows

[bswinnerton]

Describe the problem:

When using an input of type number with the appearance-none utility, browser-based arrows still appear. This seems to be counter to the description of .appearance-none, which is described as:

Use .appearance-none to reset any browser specific styling on an element.

Link to a minimal reproduction:

https://codepen.io/bswinnerton/pen/XWddGPR, where the arrows can be seen on hover:

It's worth pointing out that #1101 discussed this and the guidance was to create a custom utility to solve this problem. I'm wondering if perhaps appearance-none didn't exist then and if it would be considered to add the ability to suppress these arrows in appearance-none, or perhaps update the documentation to call out that number-based inputs are not supported.

[adamwathan]

This is just how CSS works, appearance-none just sets appearance: none; so whatever that does is what the utility does. We could consider deviating from what appearance: none actually does and trying to be "smart" about hiding everything we think the user expects to be hidden but I worry those expectations are going to be different for each user :/

[gcavanunez]

Yeah is true, it almost feels like its an over all input type sort of deal, since the same renders true with input type search, where the x is floating where the arrows in an input type number take place. Seem like another sort of utility class would have to used to address this scope of what is desired.

[binajmen]

If someone is looking for a solution:

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

[EdgarDev17]

Thank you. This code snippet works fine.

[MiguelCagnate]

Confirmed!! thanks a lot👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽

[ivnlabs]

@binajmen thanks, That code makes the work done, also it must go on Tailwinds.css, in Laravel you can find it on the folder called Resources->app.css, copy paste the code there

[mdjamilkashemporosh]

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