CODEWITHSUNDEEP
cssfirefoxinputnumbersoverriding
Yulian
Yulian

Reputation: 6769

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

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

Upvotes: 11

Views: 10594

Answers (3)

Pavel Vladov
Pavel Vladov

Reputation: 4837

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.

Upvotes: 6

Tanmai Sharma
Tanmai Sharma

Reputation: 83

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.

Upvotes: 7

Johannes Jander
Johannes Jander

Reputation: 5020

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

Upvotes: 13

Related Questions