微信小程序去除Button默认样式

本文介绍了在微信小程序中如何去除Button组件的默认样式,包括默认边框和背景色。通过使用伪类选择器覆盖边框样式,并设置背景色为白色来实现自定义效果。

微信小程序去除Button默认样式

 

在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。

(一)实现效果

1、实现前(默认样式):

2、实现后(去除默认边框和背景色): 

二)实现过程

1、使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。

button::after { border: none; }

2、还需要在将按钮背景色设置为白色,因为按钮默认背景色是灰色的。

button { background-color: #fff; }

 

 

 

微信小程序中去掉 button 样式可通过以下几种方法实现: ### 方法一 在样式文件里设置如下代码,可去除背景色、内外边距和边框样式: ```css button { background-color:rgb(247, 247, 247); border-radius: 0rpx; padding:0rpx; margin:0rpx; display: inline-block; line-height: 1; } button::after{ border:none; } .button-hover{ color:#000; background-color: rgb(247, 247, 247); } ``` 这种方法可以依据自身背景颜色自行设置背景色,同时去掉边框以及调整点击后的样式 [^1]。 ### 方法二 采用如下样式代码,能去掉背景色、内外边距和边框: ```css button { margin: 0; padding: 0; background-color: inherit; position: static; } button:after { content: none; } button::after { border: none; } ``` 该方法将背景色设为继承值,并且移除了按钮的伪元素内容和边框 [^2]。 ### 方法三 在样式文件中添加以下代码,可去除边框和背景色: ```css button.empty::after { border: none } .empty.plain { border: none; border-color: transparent; } .empty.button-hover{ background-color: transparent; } button.empty{ line-height: 40rpx; background-color: transparent; padding-bottom: 20rpx; } ``` 此方法适用于给按钮添加特定类名 `empty` 的情况,能让按钮背景透明,去除边框并调整行高和内边距 [^4]。 ### 示例代码 以下是对应的 wxml 代码示例: ```xml <button class="buttonstyle " open-type="feedback">反馈建议</button> <button class="buttonstyle " open-type="contact">在线客服</button> <text>管理员登录</text> ``` 在这个示例里,按钮添加了 `buttonstyle` 类名,可在对应的 wxss 文件中对该类名设置样式来去掉默认样式 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值