HTML输入溢出添加了填充（Firefox）

Question

EDIT: Added Picture showing the left "padding"

I am using HTML Input Element and also a Numeric Input Element. On both elements.

When the number of chars is longer than the Input Element size and you are moving your cursor to the last entered char there is some magic "padding" added in the beginning of the Input Element.

Is there any way to prevent this behavior?

Example:

 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> 

Note

I'm using additionally a grid as background, but the grid won't fit if padding of the Element is changing.

Answer 1

If I understood you right and you need to remove padding influence on your html blocks, you need to use

*{
   box-sizing: border-box;
 }

Or apply this rule to needed block.