Reset Inputs

A numeric input field's arrows are hidden when the Reset Inputs utility is used.

Class styles
u-remove-input-number-buttons Chrome, Safari, Edge, Opera
-webkit-appearance: none; margin: 0;
Firefox
-moz-appearance: textfield;

Best Practice

The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields.


<input type="number" placeholder="without reset input" class="u-max-width-250" />
<br />
<input
  type="number"
  placeholder="with reset input"
  class="u-remove-input-number-buttons u-max-width-250"
/>