Половина текста или числа скрыта при использовании заполнения

Question

Это CSS, который я использовал для ввода набранного числа.Есть ли способ, чтобы избежать сокрытия половины текста (в данном случае номера).Я использую Firefox в качестве браузера и написал это на codepen.io.Я только что проверил, как он работает на Chrome, и он работает отлично.Думаю, проблема в Firefox или коде.Это ссылка на мою ручку.Откройте его в Firefox и попробуйте ввести цифры или текст в поле ввода Age.Это должно показать, с какой проблемой я сталкиваюсь.Просто если это не так, дайте мне знать.Я ценю всю помощь, спасибо.

https://codepen.io/srushti335/pen/dQQBvX/

    input[type="number"]{
      height: 30px;
      width: 40%;
      border-radius: 4px;
      border: 2px solid gray;
      text-align: left;
      padding: 10px;
    }

<input type="number"/>

Answer 1

У вас есть фиксированная высота для этого элемента, поэтому ваш отступ сверху / снизу вызывает фактическую высоту для числовых символов, которые слишком малы, чтобы поместиться в символы.Я бы использовал заполнение только для левой и правой стороны, то есть изменил бы значение заполнения на padding: 0px 10px;.

https://codepen.io/anon/pen/jQdRZo

Answer 2

Заполнение входа больше.Его сопроводительный текст.Если есть фиксированная высота отступа, попытайтесь приспособиться к этой высоте.Вот почему он охватывает текст.

input #age {
    padding: 0;
}

ИЛИ

Увеличьте высоту для размещения текста, а также отступов

input {
    height: 50px;
    padding: 10px;
}