我的应用程序中有一些数值输入
<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;
}我的疑问是,现在我想加入越来越少的按钮来修改输入值,但我发现的所有示例都将它们放在输入之外,比如横向按钮。有没有办法把按钮放在输入端里面?附件是一个网站的图像,这将是预期的结果。提前感谢

发布于 2020-05-22 02:10:20
不怎么有意思。您必须使用html和CSS创建该UI。我创造了一个堆栈闪电战。让我们知道它是否有帮助,或者如果您有任何进一步的问题。
Stackblitz:https://stackblitz.com/edit/angular-ivy-plus-minus
https://stackoverflow.com/questions/61939971
复制相似问题