How to Remove the Arrows on the Numbers Field

Overview

Would you like to remove the arrows on the Numbers field in WPForms? Using a little CSS you can easily change the appearance of this form field. In this tutorial, we’ll give you the CSS needed to remove these up and down arrows on the Numbers form field.

Setup

All browsers have their own default styling for most form fields. Chrome, Safari, and Firefox, for example, will add an up and down arrow key on the Numbers form field.

Using CSS you can remove the arrows on the number field

To remove this styling, you’ll just need to add this CSS to your site. Please remember to change the form#wpforms-form-612 to match the form ID of your form.


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

Alternatively, if you’d like to apply this CSS to all forms, simply use the following CSS:

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

And that’s all you need to remove the up and down arrows on the Numbers field. Would you like to style other form fields as well? Check out our article on How to Add Some CSS Flare to Your Form Fields with CSS.