Search code examples
htmlcssbuttoninputangular7

Is it possible to add plus / minus buttons within an input of type number?

I have some number value inputs on my application

<td class="p-0 d-xl-table-cell d-none">
    <ul class="p-0 m-0">
        <li *ngFor='let item of product.items' class="def-number-input number-input d-flex justify-content-center">
            <input type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item)" style="height: 45px; line-height: 45px" min="0"> 
        </li>
     </ul>
</td>

i have managed to eliminate the arrows that come out by default inside the input to modify the value of the counter, with the following css

input {
  text-align: center;  
  border: 1px solid #6C757D;
} 

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

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

  .number-input {
  margin-bottom: 20px;
  padding-top: 20px !important;
  }

my doubt is, now I want to incorporate less and more buttons to modify the value of the input, but all the examples that I find put them outside the input, like lateral buttons. Is there any way that the buttons are inside the input? Attached is an image of a website that would be the desired result. Thanks in advanceenter image description here

Solution

  • Not really. You will have to create that UI using html and CSS. I created a stackblitz. Let us know if it helps or if you have any further questions.

    Stackblitz: https://stackblitz.com/edit/angular-ivy-plus-minus