How to disable webkit’s spin buttons on input type=”number” with CSS?

Spread the love

Sometimes, we want to disable webkit’s spin buttons on input type="number" with CSS.

In this article, we’ll look at how to disable webkit’s spin buttons on input type="number" with CSS.

How to disable webkit’s spin buttons on input type="number" with CSS?

To disable webkit’s spin buttons on input type="number" with CSS, we set the -webkit-appearance property.

For instance, we write

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

to use -webkit-appearance: none; to disable webkit’s spin buttons on the number input.

Conclusion

To disable webkit’s spin buttons on input type="number" with CSS, we set the -webkit-appearance property.

Leave a Reply

Your email address will not be published.