input type=“number” works wrong in firefox

Question

I'm using an input type="number" in my html and it looks great in Chrome (v66), but no with Firefox (v60). Here are the results:

Using Google Chrome:

---

Using Mozilla Firefox:

---

How could I fix it with Firefox?

Thanks!

Answer 1

Chrome and Firefox have pre-built visual variations on the user-forms (and some other things as well).

Best way to avoid this from happening is to simply style your own unified looks using css. For example:

input[type="number"] {
   // whatever style you want, i'll go with basic box as an example
   border: 1px solid black;
   width: 50px;
   height: 30px;
}