Q-Input Strange Behavior Height Change IOS

[Jeremy-22]

If I set the height of q-input in the class & input-class I can get the input to look the way I want it to. However, when I select the input number field to start typing, a larger blue border appears:

Here’s the component:

<template>
  <div>
    <q-input
      class="number-picker"
      input-class="number-picker-input"
      v-model="number"
      hide-bottom-space="true"
      dense
      outlined
      rounded
      bg-color="neutral"
      items-aligned
      pattern="[0-9]*"
      maxlength="3"
    />
  </div>
</template>

<script>
export default {
  props: ['number'],
  watch: {
    number: function (newNumber, oldNumber) {
      this.$emit('number-changed', newNumber)
    }
  }
}
</script>

<style>
.number-picker {
  width: 50px;
  height: 30px;
  font-size: 13px;
}
.number-picker-input {
  height: 30px;
  text-align: center;
}
</style>

Any tips?