首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >可以在number类型的输入中添加加号/减号按钮吗?

可以在number类型的输入中添加加号/减号按钮吗?
EN

Stack Overflow用户
提问于 2020-05-22 01:11:07
回答 1查看 12.9K关注 0票数 3

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

代码语言:javascript
复制
<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

代码语言:javascript
复制
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;
  }

我的疑问是,现在我想加入越来越少的按钮来修改输入值,但我发现的所有示例都将它们放在输入之外,比如横向按钮。有没有办法把按钮放在输入端里面?附件是一个网站的图像,这将是预期的结果。提前感谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-22 02:10:20

不怎么有意思。您必须使用html和CSS创建该UI。我创造了一个堆栈闪电战。让我们知道它是否有帮助,或者如果您有任何进一步的问题。

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

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61939971

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档