html - 在 <input type ="number"> 上使用 padding 时会隐藏一半的文本或数字

Question

这是我在输入的数字上使用的 CSS。有没有办法避免它隐藏一半的文本(在这种情况下为数字)。我使用 firefox 作为我的浏览器，我在 codepen.io 上写了这个。我刚刚检查了它在 chrome 上的工作方式并且它工作得很好。我猜 Firefox 或 codepen 是问题所在。这是我的笔的链接。在 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