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?
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.