How to always show up/down arrows for input “number” with CSS?

Spread the love

To always show up/down arrows for input "number" with CSS, we set the opacity of the spin buttons to 1.

For instance, we write

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

to select the spin buttons and set their opacity to 1 to keep the arrows showing on the number inputs.

Leave a Reply

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