Disable Input Number Field Arrows from CSS

Browsers are now implementing html5 input fields and ugly arrows appearing inside input type=number fields on different sites. Here’s the code to disable them.

For now only Chrome alike browsers, Opera and Mozilla have implemented type=number arrows.

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

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

Yeah, you can’t remove arrows from Opera yet, but they look pretty decent there at least.

Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

2 Responses to Disable Input Number Field Arrows from CSS

  1. That is working in Chrome, opera, mozilla etc

Leave a Reply

Your email address will not be published. Required fields are marked *