How to Remove the Arrows on the Numbers Field

Overview

Would you like to remove the arrows on the Numbers field in WPForms? All browsers have their own default styling for almost all form fields. Chrome, Safari, and Firefox, for example, will display arrow keys on the Numbers form field.

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 arrows from the field.

Setup

In order to remove this styling, we’re going to need to copy and paste the custom CSS to our site.

If you need any assistance on how and where to add your custom CSS, please review this tutorial.

Apply CSS for a specific form

This CSS will only be applied to Number form fields in the specific form ID 612. You’ll need to update this ID before using this CSS.

If you need help with how to find your form ID, please check out this tutorial.

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;
}

Apply CSS for all forms

If you just want to remove the arrows for all of your forms, you’d use this 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;
}

This CSS doesn’t change the functionality of the form field. Only numbers are accepted inside the Numbers form field, but after adding the CSS, you’ll no longer see the arrows on the field.

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 Styling to Text Based Fields.