css - HTML 输入溢出添加填充 (Firefox)

Question

编辑:Added Picture showing the left "padding"

我正在使用 HTML 输入元素和数字输入元素。在这两个元素上。

当字符数大于输入元素大小时，当您将光标移动到最后输入的字符时，会在输入元素的开头添加一些神奇的“填充”。

有什么办法可以防止这种行为吗？

例子:

input{
  width:5em;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<input type="text" value="000"><br>
<input type="text" value="000000000"><br>
<input type="number" value="000"><br>
<input type="number" value="000000000"><br>

注意

我额外使用了一个网格作为背景，但如果元素的填充发生变化，网格将无法适应。

Answer 1

如果我对你的理解是正确的，并且你需要消除填充对你的 html block 的影响，你需要使用

*{
   box-sizing: border-box;
 }

或者将此规则应用于所需的 block 。