logo标签列表

在数字输入框中添加加减按钮是否可行？

htmlcssbuttoninputangular7
8

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

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

我的疑问是，现在我想添加少和多按钮来修改输入值，但我找到的所有示例都将它们放在输入框外面，例如侧面按钮。 有没有办法将按钮放在输入框内部？ 附上一个网站的图像，这将是理想的结果。 提前致谢。

enter image description here
1
仅在父元素内部，且需要相当多的JS支持。创建两个额外的按钮“button”，并将单击处理程序绑定到输入值。此外，为您的输入添加“min”、“max”和“step”属性，以便您可以范围点击和禁用状态的-/+按钮。避免使用内联“style”... - Roko C. Buljan
1个回答
8
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接