Customizing Increment Arrows for Number Inputs with CSS and JavaScript

Introduction

The HTML <input type="number"> element offers a user-friendly way to input numerical values with built-in increment arrows, but these native controls are not fully style-able across browsers, limiting design consistency. This article addresses this by demonstrating how to hide default arrows with CSS and add functional custom buttons using JavaScript.

Hiding Native Arrows with CSS

To remove the default arrows, CSS targets browser-specific pseudo-elements. For WebKit-based browsers like Chrome and Safari, use the following code:

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

For Firefox, set the appearance to textfield:

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

To ensure broad compatibility, combine these with general appearance settings:

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

This CSS hides the arrows while maintaining input functionality, such as scrolling to increment values.

Implementing Custom Buttons

After hiding native arrows, custom buttons can be added for increment and decrement actions. A common approach uses a container div with buttons and the input element.

Example HTML structure:

<div class="custom-number-input">
  <button class="decrement-btn">-</button>
  <input type="number" value="1" min="0" class="quantity-input">
  <button class="increment-btn">+</button>
</div>

CSS for basic styling:

.custom-number-input {
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.custom-number-input button {
  background-color: #f8f9fa;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
}
.custom-number-input input {
  border: none;
  text-align: center;
  width: 60px;
  padding: 8px;
}

JavaScript to handle button clicks:

document.querySelectorAll('.decrement-btn').forEach(button => {
  button.addEventListener('click', function() {
    const input = this.nextElementSibling;
    if (input && input.type === 'number') {
      input.stepDown();
    }
  });
});
document.querySelectorAll('.increment-btn').forEach(button => {
  button.addEventListener('click', function() {
    const input = this.previousElementSibling;
    if (input && input.type === 'number') {
      input.stepUp();
    }
  });
});

This vanilla JavaScript method uses nextElementSibling and previousElementSibling to find adjacent input elements. Alternative methods like using IDs or classes offer more flexibility.

Alternative Methods and Libraries

For projects using jQuery, implementation can be simplified. jQuery example:

$('.decrement-btn').on('click', function() {
  $(this).next('input[type="number"]')[0].stepDown();
});
$('.increment-btn').on('click', function() {
  $(this).prev('input[type="number"]')[0].stepUp();
});

Note that stepUp and stepDown methods are called on the DOM element, not the jQuery object, hence the [0] index.

Additionally, when using buttons inside forms, prevent default form submission by adding preventDefault() in event handlers or using global scripts.

Cross-Browser Compatibility and Best Practices

The stepUp and stepDown methods are part of the HTML5 specification and supported in modern browsers. Testing in various environments is recommended. For accessibility, ensure custom buttons are keyboard-navigable and add ARIA labels if needed.

Conclusion

Customizing increment arrows for number inputs enhances UI consistency and design flexibility. By hiding native arrows with CSS and implementing custom buttons with JavaScript, developers achieve a uniform appearance across browsers, relying on efficient standard web technologies.