微信小程序去除Button默认样式
2023-09-27 14:26:14 时间
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。
(一)实现效果
1、实现前(默认样式):
2、实现后(去除默认边框和背景色):
(二)实现过程
1、使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。
button::after {
border: none;
}
2、还需要在将按钮背景色设置为白色,因为按钮默认背景色是灰色的。
button {
background-color: #fff;
}
这样两步就可以搞定小程序按钮默认样式了,只是相当于一个文本的样式,还是有很多button的默认样式没有去除的,这个需要根据个人需求来设置的,这里不过多说明,如果需要自定义可以在按钮上一个类选择器就可以搞定。
相关文章
- H5和微信小程序测试区别
- 微信小程序 - 上拉加载下拉刷新
- 微信小程序 - 关于下拉刷新
- 微信小程序 - .gitignore失效问题
- 微信小程序 项目实战(三)list 列表页 及 item 详情页
- 微信小程序轮子 - 调起摄像头拍摄照片并获取照片路径(可用于拍摄身份证 / 人像等等)
- 微信小程序 - 获取当前日期时间(函数封装)
- 看完即会,抓取微信小程序数据包教程
- 【转】利用js来实现微信摇一摇来自动更换网页背景的功能
- 《微信小程序:开发入门及案例详解》—— 2.2 “徒手”创建小程序
- RSA公钥格式PKCS#1,PKCS#8互转(微信获取RSA加密公钥)
- 微信小程序转义解析渲染html
- 微信小程序canvas在其他图片上画圆形图片
- 微信小程序框架与组件
- 微信小程序组件 360
- 微信开发(03)之新建按钮时报错 errcode 40054
- 《微信小程序开发入门精要》——第2章,第2.3节垂直排列
- 《微信公众平台与小程序开发——从零搭建整套系统》——第1章,第1.9节小结
- iOS-高仿微信摇一摇动画效果加震动音效
- 微信wap开发,页面显示元素不全-微信开发(asp.net)
- 微信小程序云开发实现图片的上传、存储、访问
- 微信小程序API~检查登录状态
- 微信小程序---代码构成
- 微信小程序ssm校园求职系统+后台管理系统|前后分离VUE
- 微信小程序02-轮播图实现与图片点击跳转
- 微信小程序返回上一页各种方法
- 微信小程序JS导出和导入
- 微信小程序无法获得unionID
- 微信小程序 定时器setInterval、setTimeout,简单易用
- 最简单的微信小程序滑动删除
- 一个微信小程序跳转到另一个微信小程序