微信小程序button控件隐藏边框

想使用button自带的disable属性和效果,但又不需要button显示边框线
button控件有一条淡灰色的边框,在控件上了样式 border-radius: 0; 无法让button边框隐藏
代码如下:

.tx-btn {
  z-index: 99;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  background-color: #4abdcc;
  border-radius: 0;/*一般使用这个就是可以去掉边框了*/
}
微信小程序button控件隐藏边框_第1张图片
解决前效果
解决方案

发现button控件有一个伪元素(::after),这伪元素有border属性,默认为 border:1px solid rgba(0, 0, 0, 0.2)

所以border:none属性是有效果的,只是被button::after 覆盖了,把button::afterborder 属性设置为none0即可

代码如下:

.tx-btn {
  z-index: 99;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  background-color: #4abdcc;
  border-radius: 0;
}

button[class="tx-btn"]::after {
  border: 0;
}
微信小程序button控件隐藏边框_第2张图片
解决后效果

你可能感兴趣的:(微信小程序button控件隐藏边框)