Center text in html number input

I found that playing around with the width and padding-left properties worked in my situation because I required a fairly small box of width 45px.

So using

padding-left:10px;
width:45px;
text-align:center;

worked nicely.

https://jsfiddle.net/faanvme3/

Just this:

Using css

input[type="number"] {
  text-align: center;
}

Using bootstrap

<input type="number" class="text-center" min="1" max="99" name="quantity">

You can have the spinner buttons (arrows) always show:

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

Or you can have them always hidden:

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

With either option, the contents will always be centred.

Related