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

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

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

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

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

html

css

input

button

angular7