Center text in html number input

Question

I have a number input in html. I want to center the text (i.e. the input) that is inside. I of course did:

text-align: center;

which sort of works. The problem is though. The text is now centered when those arrows are shown. But when the arrows disappear, the text stays at the same position which now of course isn't the center anymore.

Answer 1

Just this:

Using css

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

Using bootstrap

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

Answer 2

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/

Answer 3

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.