up vote 2 down vote favorite

I've seen this question asked before in here Can I hide the HTML5 number input’s spin box?, and some others have asked with a specific request for a Browser, in my case what i want to know is: Is there a way to create a css class like .no-spin to hide the spin arrows across browsers?

I tried:

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

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

share
up vote 9 down vote accepted

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"/>

share
    
Is this solution supported in most browsers and devices? – feniixx Nov 17 '15 at 6:00
1  
it should work based on the !important for safari and the rest for chrome and firefox happy for community to suggest any improvements I might have missed.. – Abs Nov 17 '15 at 6:03
    
not working in FF – edward Nov 11 '16 at 6:13
    
how about IE. And if it does work, which versions? – Yahya Uddin Jan 21 at 23:18
    
This worked for me in Chrome, however, beware that the up and down arrow keys will still cause the number to be incremented or decremented. – Aaron Cicali Jan 27 at 4:40
up vote -1 down vote

You can try just in your html

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

or if you really want to keep it as number, although as security doesn't change anything maybe try in your css this:

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.