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

输入的填充更多。其覆盖文字。如果有固定的高度，则填充将尝试容纳该高度的内部。这就是为什么它覆盖了文本。

input #age {
    padding: 0;
}

OR

增加高度以适应文本和填充

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

Answer 2

该元素的高度固定，因此填充的顶部/底部会导致数字字符的实际高度过低而无法容纳其中的字符。我将只对左侧和右侧使用填充，即将填充值更改为padding: 0px 10px;。

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

在<input type =“ number” />

2 个答案: