微信小程序 - 修改 button 样式 边框和背景色

wxml代码:

   <view>
      <button class="publish" disabled="{{disabled}}" bindtap='submit'>发表</button>
    </view>

css代码:

/* 去掉按钮边框方法一 */
.publish::after {
  border: none;
}
 
/* 去掉按钮边框方法二 */
.publish::after {
  border: 0;
}

设置透明按钮:

.publish{ 
width:100%;
margin: 0 auto;
display:block;
color: #CDB03B;
background: transparent;   /*设置背景颜色一致*/
border-color: transparent; /*设置边框颜色一致*/
/* background-color: rgba(255,255,255,0); */
}
.publish::after{   
   border: none;    /*设置边框取消*/
 }

button 设置 disabled 之后背景颜色和字体颜色的值都是默认的 ,需要修改 disabled 背景颜色和字体颜色。

/* 修改默认背景色 */
.publish[disabled][type="default"], wx-button[disabled]:not([type]) {
  color: #7f8389;
  background-color: white;
  border-color: white;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值