前言
最近在开发微信小程序,顺便记录一下自己踩过的坑
一、按钮样式的修改
小程序默认按钮样式背景色是灰色,有边框,如图1,想要修改成背景色为绿色,无边框,如图2,
于是做了如下修改:
<!-- wxml文件 -->
<button class="btn1" type="default"> default </button>
<button class="btn2" type="default"> default </button>
/*wxss文件*/
button.btn1{
width:200rpx;
margin:50rpx auto;
}
button.btn2{
width:200rpx;
margin:50rpx auto;
border:none;
background:#00D6A6;
color:#ffffff;
}
结果得到了图3的结果,发现边框并没有去掉
研究之后发现,按钮的默认边框是添加在button:after伪类上面,于是进行如下修改:
button.btn2::after{
border:none;
}
这样就大功告成了