Styling an input type=number

html

responsive-design

css

accessibility

byAlex Kataev·Jan 16, 2025

To sweep spinners under the rug and get down to basic styling of your number input, try this:

/* Chrome, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { /* deleting number spinner in Chrome, Safari */
  -webkit-appearance: none;  /* Bye bye, spin-button */
  margin: 0; /* Normalize, normalize! */
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield; /* No more spin-button in Firefox */
}

/* IE, Edge */
input[type="number"]::-ms-clear { display: none; } /* Disappear! */

Now, flex your color muscles:

input[type="number"] {
  background-color: #f2f2f2; /* Like a fluffy cloud */
  color: #333; /* As dark as my coffee */
  font-family: sans-serif; /* Nothing serif-y about it */
}

For further styling of Chrome’s spinners specifically:

/* Style up arrow */
input[type="number"]::-webkit-inner-spin-button {
  background-color: blue; /* Blues for the up */
}

/* Style down arrow */
input[type="number"]::-webkit-outer-spin-button {
  background-color: red; /* Reds for the down */
}

Unlocking advanced spinner button styles

To give your spin buttons a wardrobe change, consider the following techniques:

Dressing up your own spinner buttons

To debut your custom spinner wardrobe, hide the defaults:

/* Unseen default spin buttons in Chrome */
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Now you see me, now you don't */
  height: 0; /* As tall as an ant’s hat */
  opacity: 0; /* As transparent as ghost */
}

And walk the custom spin-button runway:

.spinner-arrows {
  position: absolute; /* Pinned to the spot */
  right: 5px; /* Right-aligned like a political party */
  display: flex; /* Can you stretch, touch your toes? */
  flex-direction: column; /* Standing tall */
  pointer-events: none; /* No touching, please */
}

/* Custom up arrow */
.spinner-arrows .up {
  background-color: blue; /* Soaring high in the sky */
}

/* Custom down arrow */
.spinner-arrows .down {
  background-color: red; /* Hot as chilli */
}

The spin-button beauty pageant: Cross-browser edition

Cross-browser styling is a demanding contest, but with these tips, it shouldn’t have to be:

/* For IE11 and earlier versions */
input[type="number"] {
  -ms-appearance: textfield; /* IE doesn't like to conform */
}

/* Edge does not have a pseudo-element for spin buttons, use manual adjustment */
/* Edge is edgy, get it? */

Keeping the functionality runway clear

Spinners aren’t just for show, we need to keep the runway clear for functionality:

.spinner-arrows div {
  pointer-events: none; /* Don't block the input */
}

/* Enable pointer events on actual buttons */
.spinner-arrows div * {
  pointer-events: auto; /* Click away! */
}