How can I create custom, visually appealing increment and decrement buttons for an input field of type number in CSS?

Customizing Increment Arrows on Input of Type Number Using CSS

Problem

An input field of type number displays poorly styled increment arrows. The goal is to transform it into a more aesthetically appealing design, akin to separate buttons.

Proposed Solution

While CSS techniques alone cannot entirely achieve the desired result, a clever workaround exists. Here's how it's done:

1. Hide the Native Input Arrows:

   Using CSS, set appearance: none on the ::-webkit-outer-spin-button and ::-webkit-inner-spin-button pseudo-elements within the input field. This will hide the default arrows.

2. Create Custom Buttons:

   Next, surround the input field with two separate buttons, one for decrementing and one for incrementing. Use Font Awesome icons or custom images for the buttons' visuals.

3. Handle Value Manipulation:

   Add event listeners to the custom buttons. When a button is clicked, trigger the stepUp or stepDown methods on the original input field to change its value accordingly.

Implementation Example (Using jQuery with Bootstrap):

<div class="input-group inline-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary btn-minus">
      <i class="fa fa-minus"></i>
    </button>
  </div>
  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary btn-plus">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</div>

$('.btn-plus, .btn-minus').on('click', function(e) {
  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');
  const input = $(e.target).closest('.input-group').find('input');
  if (input.is('input')) {
    input[0][isNegative ? 'stepDown' : 'stepUp']()
  }
})

.inline-group {
  max-width: 9rem;
  padding: .5rem;
}

.inline-group .form-control {
  text-align: right;
}

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

This setup hides the native arrows, adds custom buttons for incrementing and decrementing, and manipulates the input field's value using jQuery's stepUp and stepDown methods.

The above is the detailed content of How can I create custom, visually appealing increment and decrement buttons for an input field of type number in CSS?. For more information, please follow other related articles on the PHP Chinese website!