Firefox does not allow decimals in input[type=number]

Question

I encountered some strange behavior in Firefox. I have a simple input[type=number] field and when I try to type a decimal value in it (e.g. 4.5), the browser puts an ugly red border around my input.

<input type="number" />

How can I fix this and override this stupid behavior of Firefox?

See jsFiddle

Answer 1

If you set a step="0.01", then the border disappears.

The number type has a step value controlling which numbers are valid (along with max and min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).

Simply change this value to whatever is appropriate. However, this also means the user can step only by your value with the little arrows.

Taken from this answer

Answer 2

Referencing the section "Allowing_decimal_values" at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Allowing_decimal_values,

Adding the attribute step="any" will allow decimals.