微信小程序用vant weapp组件设置圆角边框输入框

在VantWeApp中,修改输入框样式为圆角时,直接设置`.van-field`的`border-radius`无效,因为存在框架内置的`van-cell`样式影响。正确做法是找到并修改`van-cell`的样式,这样才能成功实现圆角效果。注意隐形样式对调试的影响,检查所有可能影响的样式层。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vant weapp的输入框样式默认都是方形的,有时候需要设置成圆角的样式,发现直接设置以下样式根本不起作用,这是因为框架自带的样式导致的,这时候我们需要看看style,找到为什么修改不成功。

.van-field{
boder-radius:50rpx;
}

在这里插入图片描述
起初我把所有能试的方法都试了发现就是没有办法改变边框的样式,后来才发现框架有坑,我一直调的是van-field的样式,但其实还有一个看不见但存在的van-cell,找到它之后修改它就成功啦。有很多样式你看不见但是在影响着你调试,所以下次遇到这样的情况的时候先检查看看再调试。
在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值