纵有疾风起
人生不言弃

关于小程序button控件上下边框的显示和隐藏问题

问题:

小程序的button控件上下有一条淡灰色的边框,在空件上加上了样式 border:(none/0); 都没办法让button上下的的边框隐藏:

代码如下

<button class="con_listbox" hover-class="none"> .con_listbox{   width: 100%;   height: 120rpx;   padding: 0 32rpx;   display: flex;   justify-content: space-between;   align-items: center;   background: #fff;   font-size: 28rpx;   border:none; /*正常来说加上这个是可以去掉边框的*/ }

 

效果图如下:

关于小程序button控件上下边框的显示和隐藏问题插图

后来发现button控件上有一个伪元素(::after),继而发现这元素上有一个border属性,默认为 border:1px solid rgba(0, 0, 0, 0.2),虽然显示被划线,但功能在执行(钩钩打上了) 具体如图:(调试的样式列表往下拉最后)

关于小程序button控件上下边框的显示和隐藏问题插图(1)

所以问题解决了,border:none属性不是没效果,是被button::after 给覆盖了,只要把button::after 的border 属性去掉就可以了,具体代码如下:

/*去掉按钮边框*/ button[class="con_listbox"]::after {  border: 0;} 

以上内容供学习总结分享,有什么不对的地方或可优化的地方,欢迎各位多多指教。

文章转载于:https://www.cnblogs.com/miu-key/p/7156070.html

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 关于小程序button控件上下边框的显示和隐藏问题

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活