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?
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
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.
Adding the attribute step="any" to the input will both remove the red border in Firefox and allow entering any number of digits after the decimal separator while keeping the step the increase/decrease buttons modify the input value with to 1:
<input type="number" step="any" />
If the user has entered a fractional number, the increase/decrease step will round the number to a whole number. For example, if the user enters a value of 10.1 in the input field and clicks the increase button, the value will be increased to 11. If the user clicks the decrease button, the value will be decreased to 10.
