【Antdv】input type=number、InputNumber 去掉上下箭头

109 阅读 0 评论 72 点赞

我是靠谱客的博主听话高跟鞋，这篇文章主要介绍【Antdv】input type=number、InputNumber 去掉上下箭头，现在分享给大家，希望可以做个参考。

input type=number

会出现的问题：

1、右侧会出现上线箭头

2、鼠标滚动会修改数值，容易出现负数

解决方案

去掉箭头
复制代码input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; }
1
2
3
4
5
6
7
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-moz-appearance: textfield;
}
注意：在弹框中设置可能不生效，less/scss 可以用样式穿透 /deep/

禁用鼠标滑动
复制代码@mousewheel.native.prevent @DOMMouseScroll.native.prevent
1
@mousewheel.native.prevent @DOMMouseScroll.native.prevent

InputNumber 去掉上下箭头

复制代码

1
2
3
4

form .ant-input-number-handler-wrap {
display: none;
}

最后

以上就是听话高跟鞋最近收集整理的关于【Antdv】input type=number、InputNumber 去掉上下箭头的全部内容，更多相关【Antdv】input内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：antd
浏览次数：109 次浏览
发布日期：2023-12-17 17:10:19
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_fy_12__7__26_y.html

【Antdv】input type=number、InputNumber 去掉上下箭头

解决方案

去掉箭头

注意：在弹框中设置可能不生效，less/scss 可以用样式穿透 /deep/

禁用鼠标滑动

InputNumber 去掉上下箭头

最后

评论列表共有 0 条评论

发表评论取消回复

【Antdv】input type=number、InputNumber 去掉上下箭头

解决方案

去掉箭头

注意：在弹框中设置可能不生效，less/scss 可以用样式穿透 /deep/

禁用鼠标滑动

InputNumber 去掉上下箭头

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复