How to style an input type=number with CSS?

Spread the love

Sometimes, we want to style an input type=number with CSS.

In this article, we’ll look at how to style an input type=number with CSS.

How to style an input type=number with CSS?

To style an input type=number with CSS, we select the -webkit-inner-spin-button pseudoclass.

For instance, we write

<input type="number" />

to add a number input.

Then we write

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

to select the number input spin button and hide it with -webkit-appearance: none;.

Conclusion

To style an input type=number with CSS, we select the -webkit-inner-spin-button pseudoclass.

Leave a Reply

Your email address will not be published. Required fields are marked *