問題描述:
微信小程序的button控件有一個(gè)灰色的邊框躲株,嘗試去除邊框 border:(none/0); 對(duì)按鈕沒有效果:
代碼如下
<button loading="{{loading}}" class='endClass' bindtap='goRecharge'>去充值</button>
.endClass{
display: block;
width: 90%;
background-color: #00CDCD;
height: 40px;
border-radius: 20px;
color: white;
font-size: 15px;
position:absolute;
bottom:5%;
margin-left: 10px;
border:none; /*正常來說加上這個(gè)是可以去掉邊框的*/
}
效果如下:
屏幕快照 2017-12-11 14.29.56.png
打開調(diào)試發(fā)現(xiàn)原來是button控件上有一個(gè)偽元素(::after),后面加了個(gè)border屬性,值為 border:1px solid rgba(0, 0, 0, 0.2)荡陷,如下圖所示:
屏幕快照 2017-12-11 14.28.07.png
解決方案:
去掉按鈕邊框
button[class="endClass"]::after {
border: 0;
}
由于在工作中按鈕都是不需要這個(gè)邊框的所以可以在app.xss吧按鈕初始化為不帶邊框的 以后就不用每個(gè)頁面都處理這個(gè)問題:
button::after {
border: 0;
}