美文网首页
微信小程序button控件隐藏边框

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

作者: ChinaGoodStaff | 来源:发表于2018-03-24 13:07 被阅读2784次

    想使用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控件有一个伪元素(::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控件隐藏边框

          本文链接:https://www.haomeiwen.com/subject/qpsqcftx.html