Question

我在Firefox中遇到了一些奇怪的行为。我有一个简单的输入[type = number]字段，当我尝试在其中键入一个十进制值（例如4.5）时，浏览器会在我的输入周围放置一个丑陋的红色边框。

<input type="number" />

如何修复此问题并覆盖Firefox的这种愚蠢行为？

Answer 1

如果设置step="0.01"，则边框会消失。

数字类型有一个步长值，用于控制哪些数字有效（以及最大值和最小值），默认值为1.此值也用于步进按钮的实现（即逐步按下增加）。

只需将此值更改为适当的值即可。但是，这也意味着用户可以使用小箭头仅使用您的值。

Answer 2

在输入中添加属性 step =“ any” 会删除Firefox中的红色边框，并允许在小数点分隔符后输入任意数字，同时保持增加/减少按钮的修改输入值到1：

<input type="number" step="any" />

如果用户输入小数，则增加/减少步骤会将数字四舍五入为整数。例如，如果用户在输入字段中输入值10.1并单击增加按钮，则该值将增加到11。如果用户单击减少按钮，则该值将减小到10。

Answer 3

添加属性step="any"将允许使用小数。