微信小程序中button去除默认的边框实例代码

微信(小程序)  /  管理员 发布于 5年前   290

微信小程序中button去除默认的边框的实现方法如下所示：

button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.55555556; border-radius:5px; -webkit-tap-highlight-color:transparent; overflow:hidden; color:#000000; background-color:#F8F8F8;}

这是button默认自带的css样式

正常来说，去除button我们使用如下代码即可

button{ border:none;}或者button{ outline: none;}

但是有时候却不起作用，这个时候我们可以使用::after 伪类选择器，因为button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值。

button::after { border: none;}

这样就可以搞定小程序按钮默认样式了，只是相当于一个文本的样式，还是有很多button的默认样式没有去除的，这个需要根据个人需求来设置的，这里不过多说明，后续有再遇到相关情况，再续更，如果需要自定义可以在按钮上一个类选择器就可以搞定。

总结

以上所述是小编给大家介绍的微信小程序中button去除默认的边框实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• 微信小程序分享功能之按钮button 边框隐藏和点击隐藏
• 微信小程序中button组件的边框设置的实例详解
• 微信小程序中button去除默认的边框实例代码
• 微信小程序mpvue点击按钮获取button值的方法
• 微信小程序中添加客服按钮contact-button功能
• 微信小程序button组件使用详解
• 微信小程序组件 contact-button（客服会话按钮）详解及实例代码
• 微信小程序 Button 组件详解及简单实例
• 微信小程序（十四）button组件详细介绍
• 微信小程序 图片边框解决方法