去除button默认样式
/* 去掉背景色和内外边距 */ button { margin: 0; padding: 0; background-color: inherit; position: static; } button:after { content: none; } /* 去掉边框 */ button::after { border: none; }
实例: 分享按钮,
用户需要点击按钮分享当前页面,不过按钮样式需要自定义
<view class="btn-wrap"> <view class="btn-wrap__text">微信好友</view> <button open-type="share" class="btn-wrap__btn"></button> </view>
通过绝对定位,让button在自定义元素之上,以便用户点击
.btn-wrap { position: relative; &__btn { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: inherit; padding: 0; margin: 0; &::after { border: none; } } }
参考
微信小程序去掉button边框