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

Answers


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


Need Your Help

Get background color to fill full height of div

html css

I have a div that has fixed height and a background color - as you can imagine the background color does not expand to fill the full height of the div.

How to attach a document to an email using php

php email

I have a document in my websites directory that I want to be attached to an email when the submit button is click but having issues getting this to work I can't quite see how I would do this with o...