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

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.

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

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 4

I achieved what you describe using position relative/absolute on the spinner. The outcome is that the text of your input is centred while keeping the convenience of the spinner on top of it when necessary.

    input {
    text-align: center;
    position: relative;
  }
  input[type='number']::-webkit-inner-spin-button {
    position: absolute;
    width: 12.5%;
    height: 100%;
    top: 0;
    right: 0;
  }

In this example I assumed the spinner would be 1/8 of the size of the input, but that's up to you.