是否可以在数字类型输入中添加加/减按钮？

Question

我的应用程序中有一些数字值输入

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

我已经设法消除了输入中默认出现的箭头，以使用以下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;
  }

我的疑问是，现在我想合并越来越少的按钮来修改输入的值，但是我发现的所有示例都将它们放在输入之外，例如横向按钮。按钮是否在输入内部？附件是网站的图像，该图像将是理想的结果。在此先感谢

Answer 1

不是。您将必须使用html和CSS创建该UI。我创建了一个堆叠闪电战。让我们知道是否有帮助，或者您还有其他疑问。