微信小程序button边框问题

问题描述：

微信小程序的button控件有一个灰色的边框，尝试去除边框 border:(none/0); 对按钮没有效果：

代码如下

<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; /*正常来说加上这个是可以去掉边框的*/
  
}

效果如下：

屏幕快照 2017-12-11 14.29.56.png

打开调试发现原来是button控件上有一个伪元素（::after），后面加了个border属性，值为 border:1px solid rgba(0, 0, 0, 0.2)，如下图所示：

屏幕快照 2017-12-11 14.28.07.png

解决方案：

去掉按钮边框

 button[class="endClass"]::after {
    border: 0;
  } 

由于在工作中按钮都是不需要这个边框的所以可以在app.xss吧按钮初始化为不带边框的 以后就不用每个页面都处理这个问题：

button::after {
  border: 0;
}