还原一下写此文的场景:微信小程序中,点击button,设置disabled的值为true时,button样式就变灰了:
button标签:
<button class='bottomBtn' bindtap="doWorkBtn" disabled="{{btnDisabled}}">btn</button>
button样式:
.bottomBtn {width: 100%;height: 49px;font-size: 18px;color: white;background: #730000;border-radius: 0;}
点击事件:
doWorkBtn: function () {this.setData({btnDisabled: true,})},
点击前和点击后效果如下:
可以清楚的看到,设置了disabled为true属性后,button背景颜色和字体颜色都变了。
那么如何修改默认样式?很简单,在css中添加下面的样式即可:
/** 必须提升样式优先权(!important) **/button[disabled] {color: white !important;background: #730000 !important;}