html - 是否可以在类型编号的输入中添加加号/减号按钮？

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。我创建了一个堆栈 Blitz 。让我们知道它是否有帮助或您有任何其他问题。

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