Hide HTML5 input type number with css class arrow?

Question

I saw this question asked earlier here. Can I hide the input box for inputs of HTML5 number? , and some others asked with a specific request for the browser, in my case I want to know: is there a way to create a css class, for example .no-spin , to hide rotation arrows in browsers?

I tried:

 .no-spin { -webkit-appearance: none; margin: 0; -moz-appearance:textfield; } 

But no luck, I really don't know much about css really ...

Answer 1

Answer

 .no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; -moz-appearance:textfield !important; } 

  <input type="number" class="no-spin"/> 

Answer 2

You can only try in your html

 <input type="text" pattern="[0-9]"> 

or if you really want to save it as a number, though, since security doesn't change anything, maybe try in your css:

 .no-spin, .no-spin:hover, no-spin:focus { -webkit-appearance: none; margin: 0; -moz-appearance:textfield; }