去除button默认样式:
/* 去掉背景色和内外边距 */
button {
margin: 0;
padding: 0;
background-color: inherit;
position: static;
}
button:after {
content: none;
}
/* 去掉边框 */
button::after {
border: none;
}
实例: 分享按钮
用户需要点击按钮分享当前页面,不过按钮样式需要自定义文章来源:https://www.toymoban.com/news/detail-717652.html
<view class="btn-wrap">
<view class="btn-wrap__text">微信好友</view>
<button open-type="share"
class="btn-wrap__btn"></button>
</view>
通过绝对定位,让button在自定义元素之上,以便用户点击文章来源地址https://www.toymoban.com/news/detail-717652.html
.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默认样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!