input type arrow spin-button non-standard

Question

I am looking at MDN for spinners (arrows for input type="number") and it says it is non standard. The way I remember is MDN also tell you what to use but in this case, it isn't. My problem is that while I am using

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}

It works for chrome but not for firefox. So I am guessing due to non-standard it is not applying, What is the "Standard" Workaround for it?

`-moz-` vendor prefix in `-webkit-` selector!! it's invalid I guess — Abhishek Pandey, Aug 16 '17 at 10:47
maybe this can help: https://stackoverflow.com/questions/43777047/alternative-of-webkit-outer-spin-button-and-webkit-inner-spin-button-in-firefo — Gerrit Halfmann, Aug 16 '17 at 11:18
Possible duplicate of [Hide Spinner in Input Number - Firefox 29](https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29) — Gerrit Halfmann, Aug 16 '17 at 11:21

Abhishek Pandey · Answer 1 · 2017-08-16T10:57:09.583

1

input[type=number]::-webkit-inner-spin-button this will work as a selector when browser is webkit otherwise none of styles within this selector will be applied.

input[type=number] {
  -moz-appearance: textfield;
  margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

<input type="number">

edited Aug 16 '17 at 10:57

answered Aug 16 '17 at 10:50

Abhishek Pandey

13,302
8
38
68

input type arrow spin-button non-standard

1 Answers1