/* Wrapper ensures the total height is exactly 44px */ .numberInputWrap { display: inline-flex; align-items: stretch; height: 44px; border-radius: 4px; overflow: hidden; } /* The + and - buttons */ .numBtn { height: 44px; min-width: 10px; padding: 8px 6px; margin: 0; } /* The actual text input in the middle */ .numInput { width: 48px; text-align: center; height: 100%; font-family: inherit; font-size: 110%; font-weight: bold; } /* Hide native up/down arrows (spinners) */ .numInput { -moz-appearance: textfield; } .numInput::-webkit-outer-spin-button, .numInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }