html - 使用填充时隐藏一半的文本或数字

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"/>

标签： htmlcss

Answer 1

输入的填充更多。它的覆盖文本。如果有一个固定的高度填充试图适应该高度的内部。这就是它覆盖文本的原因。

input #age {
    padding: 0;
}

或者

增加高度以容纳文本以及填充

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