收藏
回答

微信小程序:怎样设置button按钮样式?

补充:这是关于微信小程序的button问题

现在想要一个自己制作的样式按钮,用作分享功能,分享功能按钮又只能用内置button,现在要怎样调整成自己想要的效果呢?

按钮代码 <button class="foot_mini_btntype="default"  plain='trueopen-type='share'><text class="foot_but_invite"  >  立即邀请</text></button>

foot_mini_btn 在样式文件中无论我怎样改就是没有效果。

.foot_mini_btn{

  margin-right: 10rpx;

  width:50%;

  color: #4eb9f7;

}

.foot_mini_btn::after {

  border: 0;

}

无论怎样加样式去改变就是没有效果  各路大神都是怎样做的?
最后一次编辑于  2020-05-27
回答关注问题邀请回答
收藏

8 个回答

  • Believer
    Believer
    2020-07-13

    给button增加plain属性,然后要覆盖的样式后面加! important 有效!

    2020-07-13
    有用 8
    回复
  • 默
    2020-05-27

    1.先清除默认样式 例如 margin、padding等

    2.设置自己需要的样式即可


    2020-05-27
    有用 1
    回复 7
    • 笑而不语
      笑而不语
      2020-05-27
      这个我试过了没有效果  就是无论输入什么都没改变样式,如把margin、padding都设置为0一点效果没有
      2020-05-27
      回复
    • 账号已注销
      账号已注销
      2020-05-27回复笑而不语
      属性后面加!important,或者直接用id选择器
      2020-05-27
      回复
    • 笑而不语
      笑而不语
      2020-05-27回复账号已注销
      噢  我可能没有描述清楚,这个是微信小程序里面的样式修改
      2020-05-27
      回复
    • 默
      2020-05-27回复笑而不语
      这样不行?
      2020-05-27
      回复
    • 笑而不语
      笑而不语
      2020-05-27回复
      你那里可以设置按钮宽度吗 比如width:30%;
      2020-05-27
      回复
    查看更多(2)
  • 沈煦
    沈煦
    2021-07-09

    button {

    background: #fff !important;

    border-radius: 0rpx !important;

    }


    button::after {

    border-radius: 0rpx !important;

    border: 5rpx #fff solid !important;

    }

    2021-07-09
    有用
    回复
  • Senior
    Senior
    2021-03-10

    button{

    ..........

    }

    button-hover{

    ........//点击后的样式修改

    }

    button::after{

    //修改border

    }

    2021-03-10
    有用
    回复
  • 王治珺
    王治珺
    2021-01-29

    直接再css中设置bottom的 style中设置尺寸。

    2021-01-29
    有用
    回复
  • 洛洛
    洛洛
    2020-11-11

    把type="default" 删除

    2020-11-11
    有用
    回复
  • 平生欢
    平生欢
    2020-08-16

    请问button之间间距怎么设置呀?


    2020-08-16
    有用
    回复 1
    • 洛三岁
      洛三岁
      2020-09-07
      弹性盒子justify-content: space-between;这个试试?
      2020-09-07
      回复
  • 账号已注销
    账号已注销
    2020-05-27

    可以改变这个类名的权重

    1.换用id

    2.用important

    2020-05-27
    有用
    回复 4
    • 笑而不语
      笑而不语
      2020-05-27
      我这边可能没有描述清楚  是关于改微信小程序button样式的
      2020-05-27
      回复
    • 账号已注销
      账号已注销
      2020-05-27回复笑而不语
      小程序支持id选择器和!important,经测试,有效
      2020-05-27
      回复
    • 笑而不语
      笑而不语
      2020-05-27回复账号已注销
      感谢您的回答,后面跟!important,有效果了
      2020-05-27
      回复
    • 账号已注销
      账号已注销
      2020-05-27回复笑而不语
      类名权重不够,例如在button上新添一个类名btn,.btn.foot_mini_btn也可以达到一样的效果
      2020-05-27
      回复
登录 后发表内容
问题标签