小程序 iview i-input-number 在 i-class 修改样式不行

解决微信小程序输入框样式问题

最新推荐文章于 2023-08-24 17:49:44 发布

原创最新推荐文章于 2023-08-24 17:49:44 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

前端框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决微信小程序中inputNum自定义类名无法生效的问题，详细说明了正确的样式设置方法，并给出了修改后的样式效果。

<i-input-number i-class="inputNum" value="{{ numberVal.numOne }}" min="0" max="100" bindchange="handleNumOne" />

inputNum 不能用自己子级的class名称，据说是微信的bug
.inputNum .i-input-number-text 这样不行

.inputNum input {
	height: 84rpx;
	width: 260rpx;
	font-size: 60epx;
	line-height: 84rpx;
	border: unset;
	border-top: 1rpx solid #ddd;
	border-bottom: 1rpx solid #ddd;
}
.inputNum view {
	height: 88rpx!important;
	line-height: 78rpx!important;
	min-width: 80rpx!important;
	font-size: 60rpx!important;
	border: 1px solid #dddee1 !important; 兼容iso样式问题
}